Question

我对JavaScript和PHP都很新，所以我希望这个问题不像我看来那么复杂。我正在尝试使用XMLHttpRequest将表单中的数据发送到PHP文件，然后将PHP的输出显示为警报。这是HTML和JavaScript：

<form onSubmit="password_Check()"> 
        <input type="password" size="40" name="password" id="pass"> 
        <input type="submit" value="Go">
</form>

<script type="text/javascript">
function password_Check() {
    var url = "test.php";
    var pass = $("#pass").val();
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url+"?pass="+pass, true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
        }
    }
}   
</script>

这是PHP：

<?php
    $pass = $_GET["pass"];
    echo "The password is $pass!  We've done it!";
?>

我已尝试过各种方法来执行此操作，例如$ .post，$ .get，$ .ajax和使用POST的xhr。但我似乎无法让这个工作。现在它只是将“？password =（无论我放了什么）”添加到当前网址的末尾，它什么也没做，但它显示它正在做某事。

Answer 1

您忘记执行请求了。 xhr.send()：

另请注意，由于您拥有XMLHTTPRequest，因此需要使用.preventDefault();

来阻止默认行为（即将提交表单）

<form id="form1"> 
        <input type="password" size="40" name="password" id="pass"> 
        <input type="submit" value="Go">
</form>

<script type="text/javascript">
// handle the submission event
document.getElementById('form1').addEventListener('submit', function(e){
    e.preventDefault(); // prevent from submitting
    var url = "test.php";
    var pass = document.getElementById('pass').value; // be faithful!, just use plain javascript

    var xhr = new XMLHttpRequest();
    var params = '?pass='+pass;
    xhr.open("GET", url+params, true);
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
        }
    }
    xhr.send(); // send it
});
</script>

Answer 2

在您的代码中，您缺少实际触发请求的send部分。如果您没有触发请求，那么事件监听器就没有意义监听状态更改。

就像

一样

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText);
    }
}
xhr.send();

同样在你的问题中，你提到了jquery ajax，$.get你的代码可能就像

一样简单

$("#form1").on("submit",function(e){

    e.preventDefault();
    var url = "test.php?pass=" + $("#pass").val(); 
    $.get(url,function(data){
       //handle data here
    });

});

Answer 3

如果您正在使用jQuery，那么最好自己使用jQuery的ajax函数而不是xhr！

此外，如果您要提交密码，最好不要使用GET请求提交密码，因为它会在URL中显示。相反，在处理密码时总是使用POST！

客户方：

<form action="/index.php" id="myform" method="post">
        <input type="password" size="40" name="password" id="pass"> 
        <input type="submit" value="Go">
</form>

<script type="text/javascript">
  $('#myform').on('submit', function() {
      $.ajax({
        type: $(this).attr('method'), //Taking for the form attribute
        url: $(this).attr('action'),
        data: $(this).serialize(), //Takes care of all input fields in the form! No need to pass one by one!
        success: function(response) {
          if(response == 'success') {
            window.location.href = '/url-to-goto';  //Set your redirect url here
          }
          else {
            //Handle invalid password here
            alert(response);
          }
        }
      });

      return false;
  });
</script>

服务器端：

<?php

//If you are handling password, better to put it in the post body instead of url for security reasons
if($_SERVER['REQUEST_METHOD'] == 'POST') {
  //Check password here
  if(isset($_POST['password']) && $_POST['password'] == '123') {
    die('success'); //successful! redirect user!
  }

  die('Invalid password!');
}
?>

希望能帮助您更好地理解！

XMLHttpRequest和PHP的问题

3 个答案: