在Web开发中,PHP与JavaScript之间的通信是经常需要做的事。下面是一个例子。
JavaScript端:
一定要设置xmlHttp.setRequestHeader,否则传往PHP的参数会变成null(line 43)。第36行是亮点。
01
|
<script type= "text/javascript" >
|
02
|
function GetJson()
|
03
|
{
|
04
|
var xmlHttp;
|
05
|
try
|
06
|
{
|
07
|
// Firefox, Opera 8.0+, Safari
|
08
|
xmlHttp = new XMLHttpRequest();
|
09
|
}
|
10
|
catch (e)
|
11
|
{
|
12
|
// Internet Explorer
|
13
|
try {
|
14
|
xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" );
|
15
|
}
|
16
|
catch (e)
|
17
|
{
|
18
|
try {
|
19
|
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
|
20
|
}
|
21
|
catch (e) {
|
22
|
alert( "您的浏览器不支持AJAX!" );
|
23
|
return false ;
|
24
|
}
|
25
|
}
|
26
|
}
|
27
|
|
28
|
xmlHttp.onreadystatechange = function ()
|
29
|
{
|
30
|
if (xmlHttp.readyState == 4)
|
31
|
{
|
32
|
//alert(xmlHttp.responseText);
|
33
|
var str = xmlHttp.responseText;
|
34
|
document.getElementById( 'show' ).innerHTML +=str;
|
35
|
//alert(str);
|
36
|
var obj = eval( '(' + xmlHttp.responseText + ')' );
|
37
|
//var obj = eval(({"id":"123","name":"elar","age":"21"}));
|
38
|
alert(obj.name);
|
39
|
}
|
40
|
}
|
41
|
var data = "id=123" ;
|
42
|
xmlHttp.open( "POST" , "testJson.php" , true );
|
43
|
xmlHttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
|
44
|
xmlHttp.send( "id=123" );
|
45
|
}
|
46
|
</script>
|
47
|
<input type= "button" onclick= "GetJson()" value= "按我!" />
|
48
|
<hr />
|
49
|
<div id= "show" ></div>
|
PHP端【testJson.php】:
注意,php文件要干净,<?php ?>标签的外部不能有其他标签,否则eval函数无法解析。
1
|
<?php
|
2
|
$res [ 'id' ] = $_POST [ 'id' ];
|
3
|
$res [ 'name' ] = "elar" ;
|
4
|
$res [ 'age' ] = "21" ;
|
5
|
$response = "hello this is response" . $_POST [ 'id' ];
|
6
|
echo json_encode( $res );
|
7
|
?>
|
总结:
js要往PHP端送数据,用的是xmlHttp.send("id=123");
PHP给js送数据,用的是echo json_encode($res);(要注意变量$res的构造应符合JSON的规范)
js要解析PHP送来的JSON格式的数据,用var obj = eval('('+ xmlHttp.responseText +')');