Question

我正在阅读一本描述通过POST请求实现Ajax的过程的书。这是代码：

文件名称： ajaxtest.html

<html>
<head>
<title>AJAX Example</title>

<script type="text/javascript" src ="xhr.js"></script>

</head>

<body>
<h1>LOADING A WEBPAGE INTO A DIV</h1>

<div id="info">This is going to be replaced </div>

<script type="text/javascript">

url = "ajaxtest.php"

params = "url=oreilly.com"

request = new ajaxRequest()

request.open("POST",url,true)

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencode")

request.onreadystatechange = function()
{
    if(this.readyState == 4)
    {
        if(this.status == 200)
        {
            if(this.responseText != null)
            {
                document.getElementById('info').innerHTML = this.responseText
            }
            else
            {
                alert("Ajax error: No data received ")
            }
        }
        else
        {
            alert("Ajax Error " + this.statusText)
        }
    }
}

request.send(params)


</script>

</body>
</html>

在阅读其他一些文章后，该书的例子还有2行我删除了：

request.setRequestHeader("Content-length", params.length)
request.setRequestHeader("Connection", "close")

ajaxRequest 函数保存在名为 xhr.js 的单独.js文件中：

function ajaxRequest()
{
try
{
    // fon NON-IE browsers
    var request = new XMLHttpRequest()
}
catch(e1)
{
    try
    {
        //for IE6+ browser
        var request = new ActiveXObject("Msxml2.XMLHTTP")
    }
    catch(e2)
    {
        try
        {
            //for IE5
            var request = new ActiveXObject("Microsoft.XMLHTTP")
        }
        catch(e3)
        {
            //No AJAX support 
            var request = false
        }
    }
}
return request
}

ajaxtest.php 文件是：

<?php

if(isset($_POST['url']))
{
echo file_get_contents("http://".$_POST['url']);

echo "test1";
}

echo "test2";

echo $_POST['url'];
?>

问题是，只要我执行 ajaxtest.html ，部分＆＃34;这将被替换＆＃34;，它会消失（这是正确的），但是之后我得到的是 ajaxtest.php 中 if（isset（））之外的部分。当它到达 if（isset（））之外的回声 $ _ POST [＆＃39; url＆＃39;] 时，我收到以下错误：

注意：未定义的索引：第11行的C：\ wamp \ www \ ajaxtest.php中的网址

当然， test2 会打印在页面上。

为什么会这样？不应该 $ _ POST [＆＃39; url＆＃39;] 也可以在 ajaxtest.php 脚本中使用？

Answer 1

HTML文件

<html>
<head>
<title>AJAX Example</title>
<script type="text/javascript" src ="xhr.js"></script>
</head>
<body>
<h1>LOADING A WEBPAGE INTO A DIV</h1>

<div id="info">This is going to be replaced </div>

<script type="text/javascript">
url = "ajaxtest.php";
params = "url="+encodeURIComponent("oreilly.com");

request = new ajaxRequest();
request.open("POST",url,true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

request.onreadystatechange = function() {
    if(this.readyState == 4) {
        if(this.status == 200) {
            if(this.responseText != null) {
                document.getElementById('info').innerHTML = this.responseText;
            } else {
                alert("Ajax error: No data received ")
            }
        } else {
            alert("Ajax Error " + this.statusText)
        }
    }
}

request.send(params);
</script>
</body>
</html>

<强> ajaxtest.php

<?php   
if(isset($_POST['url'])) {
    $_POST = array_map("urldecode",$_POST);
    echo file_get_contents("http://".$_POST['url']);
} else {
    echo "test2";
}
?>

首先，您需要在通过ajax发送参数之前对其进行编码。

其次，在php中获取参数时，需要解码它们。

第三，你拼错了内容类型。

Answer 2

您的内容类型错误：

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencode")
//                                                                         ^

应该是：

request.setRequestHeader("Content-type", "application/x-wwww-form-urlencoded")

使用错误的内容类型，您仍然可以告诉PHP解析它：

parse_str(file_get_contents('php://input'), $data);
echo $data['url'];

但是设置正确的内容类型将是最佳选择。

Answer 3

使用您正在阅读的图书中的相同javascript格式，您可以定义您的＆＃39;参数＆＃39;就这样：

params = JSON.stringify({url:'oreilly.com'});//SEND AS JSON OBJECT

并在PHP文件中：

        <?php
        $request_body = file_get_contents('php://input');
        $data = json_decode($request_body);//DECODE JSON OBJECT
        $url = $data->url;//EXTRACT THE "URL" VALUE FROM DECODED JSON OBJECT
        if(isset($url))
        {
        echo file_get_contents("http://".$url);
        echo "test1";
        }
        ?>

Answer 4

使用Jquery AJAX方法使得使用ajax通信变得更加简单。

这可以使用以下代码行完成:(对于Web连接的站点，如果是本地使用，则需要在本地下载文件）

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

然后您将使用以下代码设置您的ajax请求：

$.ajax({
    url: "path", 
    type: "POST", //http verb, can be any of the standard verbs, eg, GET, PUT, POST, DELETE... 
    data:{data1:data1_value, data2:data2_value}, //any post data to send with request
    async: true, 
    dataType:'json', //data format expected from server
    success: function (data) {
        //code to execute on success (the data variable contains any data returned by the server
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //code to handle errors goes here
    },
});

通过POST请求实现AJAX

4 个答案: