I'm试图发送用户名和密码到使用AJAX post方法的php文件.如何检索字段 - I'm trying to send username and password to a php file using AJAX with post method. How to retrieve fields

如何访问这些变量?我试图在php文件中检索用户名和密码，但是，如果我使用$_POST['Username'}

，它说未定义索引用户名

 <script>
    var a = new XMLHttpRequest();
    a.onreadystatechange = function(){
         if (a.readyState==4 && a.status==200) {
              ajaxFinished = true; 
              alert(a.responseText);
         }
         else {
         }                          
    }
    a.open("post","php/psswd.php",true);
    a.send('"Username="+document.getElementByNames("Username")+"&Password="+getElementByNames("Password")'); // posting username and password
 </script>

如何在php文件中检索这些字段

我自己找到了答案，问题是，a.setRequestHeader("内容类型","应用程序/x-www-form-urlencoded");需要添加。并且document.getElementsByName('xyz')返回nodeList，但不是特定的节点，我们需要遍历该nodeList

不使用XMLHttpRequest方法，看一下这个:

<script type="text/javascript">
    $('#loginForm').submit(function(e) {
            var username    = $("#login-username").val(); //id of the form text input
                password    = $("#login-password").val(); //id of the form text input
             e.preventDefault();
         $.ajax({
             type: "POST",
             url: url,
             data: { form: 'login', username: '' + username + '', password: '' + password + ''}
           }).success(function( msg ) {
             //msg is the text returned from the PHP function that will validate the login
               $('.login_success_text').html(msg);
          });
        });
</script>
<body>
               <form role="form" name="loginForm" id="loginForm" method="POST">
                  <label>Username</label>
                  <input id="login-username" class="form-control text placeholder" placeholder="Username" name="username" type="text">
                  <label>Password</label>
                  <input id="login-password" class="form-control password placeholder" placeholder="Password" name="password" autocomplete="off" type="password">
                <input type="submit" value="Login" />
                <div class="login_success">
                  <span class="login_success_text"></span>
                </div>
</body>

语法是getElementsByName而不是你现在使用的getElementByNames

Elements是复数形式，而Names不是。

<script>
    var a = new XMLHttpRequest();
    a.onreadystatechange = function(){
        if (a.readyState==4 && a.status==200)
            {
            ajaxFinished = true; 
            alert(a.responseText);
            }
        else
            {
            }
        }
        a.open("post","php/psswd.php",true);
        a.send('"Username="+document.getElementsByName("Username")+"&Password="+getElementsByName("Password")'); // posting username and password
</script>

更多信息，请访问:

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

编辑

下面的工作使用jQuery，并在FF 28.0和IE 7上进行了测试。

旁注:您可能需要更改此window.location = "success.php"

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function chk_ajax_login_with_php(){
  var username=document.getElementById("username").value;
  var password=document.getElementById("password").value;
    var params = "username="+username+"&password="+password;
    var url = "php/psswd.php";
        $.ajax({
           type: 'POST',
           url: url,
           dataType: 'html',
           data: params,
           beforeSend: function() {
             document.getElementById("status").innerHTML= 'checking...'  ;
                     },
           complete: function() {
           },
           success: function(html) {
                 document.getElementById("status").innerHTML= html;
                 if(html=="success"){
                   window.location = "success.php"
                 }
            }
   });
}
</script>

</head>

<body>
<div id='logindiv'>
    <label>Username:</label>
        <input name="username" id="username" type="text">
    <label>Password:</label>
        <input name="password" id="password" type="password">
        <input value="Submit" name="submit" class="submit" type="submit" onclick='chk_ajax_login_with_php();'>
    <div id='status'></div>
</div>