Fatal编程技术网
  • javascript/
  • Javascript AJAX未正确发送POST变量

Javascript AJAX未正确发送POST变量

javascript php ajax post

Javascript AJAX未正确发送POST变量,javascript,php,ajax,post,Javascript,Php,Ajax,Post,我正在用AJAX编写一个基本应用程序，需要通过POST将一些数据发送到php页面 我在这里遇到的问题是php页面没有正确地接收$\u POST中的数据：如果我试图打印它的内容，我会得到一个空数组 你能帮我指出这个问题吗 // global variables var sendReq = getXmlHttpRequestObject(); // get the browser dependent XMLHttpRequest object function getXmlHttpRequest

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

我在这里遇到的问题是php页面没有正确地接收$\u 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
    }
}


?>
您的
sendMessage
功能不太正确-请查看此功能是否有帮助

在原始版本中，该函数检查了未引用实例化XMLHttpRequest对象的
receiveReq
的状态，即使使用了
sendReq
，请求也不会被发送，因为
open
和
send
调用位于检查响应的代码块内

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"}

chatserver.php（示例）
------------------------
html/php页面
---------------
ajax测试
var sendReq=getXmlHttpRequestObject（）；
函数messageSent（响应）{
info（'这是来自PHP脚本的响应：%s'，response）；
if（document.getElementById（“message”））document.getElementById（“message”）.innerHTML=响应；
}
函数getXmlHttpRequestObject（）{
if（window.XMLHttpRequest）{
返回新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
返回新的ActiveXObject（“Microsoft.XMLHTTP”）；
}否则{
document.getElementById（'status'）。innerHTML='status:创建XmlHttpRequest对象时出错'；
}
}
/* 
将'param'设置为函数的参数，可以更容易地重用它。
*/
函数sendMessage（参数）{
如果（发送请求）{
/*现在为响应设置侦听器*/
sendReq.onreadystatechange=函数（）{
/*检查请求对象的状态*/
if（sendReq.readyState==4）{
如果（发送请求状态==200）{
/*在此处理响应*/
messageSent.call（这是sendReq.response）；
}否则{
/*有一个错误*/
}
}
};
/*打开并发送请求，超出侦听器*/
/*注意：我把它放在一个名为“test”的文件夹中，因此路径如下*/
open（“POST”，'/test/demo_chatserver.php'，true）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
sendReq.send（参数）；
if（document.getElementById（“message”））document.getElementById（“message”）.innerHTML=“”；
}
}
/*发送一些数据-包括原始的“message=ciao”，但也发送其他垃圾数据*/
window.onload=函数（事件）{
sendMessage（'message=ciao&id=23&banana=yellow&php=fun&method=post&evt='+事件）；
}
应该输出如下内容：-
------------------------------
{“message”：“ciao”，“id”：“23”，“banana”：“yellow”，“php”：“fun”，“method”：“post”，“evt”：“object Event]”，“time”：1446730182，“date”：“周四，05-11-15 13:29:42 GMT”}
这里我将展示如何发送/接收基本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>
之后，我们编写了JavaScript函数，该函数使用formData对象并使用AJax技术发送请求：

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);
}

函数登录（）
{
//创建formData对象
var formData=new formData（）；
//通过类名获取输入元素
var formElements=document.getElementsByClassName（“表单控件”）；
//将表单元素附加到formData对象
对于（var i=0；i
出于对否决票的好奇，请求被发送，从而纠正了OP的问题。。。你可能被否决了，因为你应该解释你的解决方案为什么有效以及你做了什么。谢谢你的回答。除了打字错误，我还修改了我函数的结构以匹配你的结构，谢谢你的解释。问题是它仍然无法工作，并且我的php页面无法正确接收$\u POST变量。我正在更新op，让您可以使用
window.location.replace查看我更新的代码。如果您发送请求，但不等待答复，而是加载php脚本，那么将无法工作。使用控制台查看ajax请求中发生的情况。谢谢，这正是发生的情况。这篇文章很有效，但我用错误的方式测试了它。

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);
}