AJAX不能正确发送POST变量

Question

我正在编写一个基本的AJAX应用程序，需要通过POST发送一些数据到一个php页面。

我在这里得到的问题是，PHP页面没有正确接收$ _POST中的数据：如果我尝试打印其内容，我得到一个空数组。

你能帮我指出问题吗？

// global variables 
var sendReq = getXmlHttpRequestObject(); 


// get the browser dependent XMLHttpRequest object 
function getXmlHttpRequestObject() { 
    if (window.XMLHttpRequest) { 
     return new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject) { 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else { 
     document.getElementById('status').innerHTML = 
     'Status: Error while creating XmlHttpRequest Object.'; 
    } 
} 

// send a new message to the server 
function sendMessage() { 
    if (receiveReq.readyState == 0 || receiveReq.readyState == 4) { 
     sendReq.open("POST", 'chatServer.php', true); 
     sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 

     // bind function call when state change 
     sendReq.onreadystatechange = messageSent; 

     var param = "message=ciao"; 
     sendReq.send(param); 

     // reset the content of input 
     document.getElementById("message").value = ""; 
    } 
} 

chatServer.php

<?php session_start(); 
// send headers to prevent caching 
header("Expires: Mon, 1 Jul 2000 08:00:00 GMT"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . "GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache"); 

// open database 
$file_db = new PDO('sqlite:chatdb.sqlite') or die("cannot open database"); 

if ($file_db) { 
    print_r($_POST); // this prints an empty array!!! 

    // check if a message was sent to the server 
    if (isset($_POST["message"]) && $_POST["message"] != '') { 
     $message = $_POST["message"]; 
     // do stuff 
    } 
} 


?> 

编辑：

更新功能，仍然没有工作

function sendMessage() { 
    if(sendReq){ 
     /* set the listener now for the response */ 
     sendReq.onreadystatechange=function(){ 
      /* Check for the request Object's status */ 
      if(sendReq.readyState==4) { 
       if(sendReq.status==200){ 
        /* Process response here */ 
        clearInterval(timer); 
        getUnreadMessages(); 
       } 
      } 
     }; 

     /* Open & send request, outwith the listener */ 
     sendReq.open("POST", 'chatServer.php', true); 
     sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 

     var param = 'message=ciao'; 
     sendReq.send(param); 
     document.getElementById("message").value = ""; 
     // relocate to php page for debugging purposes 
     window.location.replace("chatServer.php"); 
    } 
} 

Answer 1

你sendMessage功能是不完全正确 - 看看这看看它是否有帮助。

在最初检查的receiveReq状态不参照实例化XMLHttpRequest对象sendReq功能 - 也，请求绝不会因为open和send电话是代码内发送，即使它已经使用sendReq检查响应的块...

var sendReq = getXmlHttpRequestObject(); 

function messageSent(response){ 
    console.info(response); 
} 

function getXmlHttpRequestObject() { 
    if (window.XMLHttpRequest) { 
     return new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
     return new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
     document.getElementById('status').innerHTML = 'Status: Error while creating XmlHttpRequest Object.'; 
    } 
} 

/* 
    Set the `param` as a parameter to the function, can reuse it more easily. 
*/ 

function sendMessage(param) { 
    if(sendReq){ 
     /* set the listener now for the response */ 
     sendReq.onreadystatechange=function(){ 
      /* Check for the request Object's status */ 
      if(sendReq.readyState==4) { 
       if(sendReq.status==200){ 
        /* Process response here */ 
        messageSent.call(this, sendReq.response); 
       } else { 
        /* there was an error */ 
       } 
      } 
     }; 

     /* Open & send request, outwith the listener */ 
     sendReq.open("POST", 'chatServer.php', true); 
     sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 

     sendReq.send(param); 
     document.getElementById("message").value = ""; 
    } 
} 

/* send some messages */ 
sendMessage('message=ciao'); 
sendMessage('message=ajax...sent via POST'); 

最初错过了param var声明，所以纠正了这个错误。

更新

chatserver.php (example) 
------------------------ 
<?php 
    /* 
     demo_chatserver.php 
    */ 
    session_start(); 

    if($_SERVER['REQUEST_METHOD']=='POST'){ 
     /* 
      include your db connection 
      set your headers 
     */ 



     if(isset($_POST['message']) && !empty($_POST['message'])){ 
      @ob_clean(); 

      /* Create the db conn && test that it is OK */ 

      /* for the purposes of the tests only */ 
      $_POST['date']=date(DATE_COOKIE); 
      echo json_encode($_POST, JSON_FORCE_OBJECT); 
      exit(); 
     } 
    } 
?> 



html/php page 
--------------- 
<!doctype html> 
    <html> 
    <head> 
     <title>ajax tests</title> 
     <script type='text/javascript'> 
      var sendReq = getXmlHttpRequestObject(); 
      function messageSent(response){ 
       console.info('This is the response from your PHP script: %s',response); 
       if(document.getElementById("message")) document.getElementById("message").innerHTML=response; 
      } 
      function getXmlHttpRequestObject() { 
       if (window.XMLHttpRequest) { 
        return new XMLHttpRequest(); 
       } else if(window.ActiveXObject) { 
        return new ActiveXObject("Microsoft.XMLHTTP"); 
       } else { 
        document.getElementById('status').innerHTML = 'Status: Error while creating XmlHttpRequest Object.'; 
       } 
      } 
      /* 
       Set the `param` as a parameter to the function, can reuse it more easily. 
      */ 
      function sendMessage(param) { 
       if(sendReq){ 
        /* set the listener now for the response */ 
        sendReq.onreadystatechange=function(){ 
         /* Check for the request Object's status */ 
         if(sendReq.readyState==4) { 
          if(sendReq.status==200){ 
           /* Process response here */ 
           messageSent.call(this, sendReq.response); 
          } else { 
           /* there was an error */ 
          } 
         } 
        }; 
        /* Open & send request, outwith the listener */ 

        /*NOTE: I have this in a folder called `test`, hence the path below!! */ 
        sendReq.open("POST", '/test/demo_chatserver.php', true); 
        sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
        sendReq.send(param); 
        if(document.getElementById("message")) document.getElementById("message").innerHTML = ""; 
       } 
      } 
      /* send some data - including original 'message=ciao' but other junk too */ 
      window.onload=function(event){ 
       sendMessage('message=ciao&id=23&banana=yellow&php=fun&method=post&evt='+event); 
      } 
     </script> 
    </head> 
    <body> 
     <output id='message' style='display:block;width:80%;float:none;margin:5rem auto;padding:1rem;box-sizing:content-box;border:1px solid black;'> 
      <!-- 
       Expect to see content appear here.... 
      --> 
     </output> 
    </body> 
</html> 


Should output something like:- 
------------------------------ 
{"message":"ciao","id":"23","banana":"yellow","php":"fun","method":"post","evt":"[object Event]","time":1446730182,"date":"Thursday, 05-Nov-15 13:29:42 GMT"} 

Answer 2

在这里，我会告诉我如何发送/接收基本的CRUD（创建，读取，删除，更新）的应用程序，你可以在你的代码中实现Ajax请求。

所有简单的形式与HTML

<form action="controller.php" method="POST"> 
    <input type="text" class="form-control" name="userName"/> 
    <input type="text" class="form-control" name="password"/> 
    <input type="Submit" value="Log In" onclick="logIn(); return false;"/> 
</form> 

输入元件之后的首先我们编写使用FORMDATA对象，并使用AJAX技术发送请求JavaScript函数：

function logIn() 
{ 
    //Creating formData object 
    var formData = new FormData(); 
    //Getting input elements by their classNames 
    var formElements = document.getElementsByClassName("form-control"); 
    //Append form elements to formData object 
    for(var i = 0; i < formElements.length; i++) 
     formData.append(formElements[i].name, formElements[i].value) 
    //Creating XMLHttpRequest Object 
    var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.onreadystatechange = function() 
     { 
      if(xmlHttp.readyState == 4 && xmlHttp.status == 200) 
      { 
       alert(xmlHttp.responseText); 
      } 
     } 
     xmlHttp.open("POST", "controller.php"); 
     xmlHttp.send(formData); 
}