我正在阅读一本描述通过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 脚本中使用?
答案 0 :(得分: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中获取参数时,需要解码它们。
第三,你拼错了内容类型。
答案 1 :(得分:0)
您的内容类型错误:
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'];
但是设置正确的内容类型将是最佳选择。
答案 2 :(得分:0)
使用您正在阅读的图书中的相同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";
}
?>
答案 3 :(得分:-1)
使用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
},
});