189 8069 5689
由 JavaScript 调用的服务器页面，是名为 "getuser.php" 的简单 PHP 文件。
成都创新互联公司服务项目包括新北网站建设、新北网站制作、新北网页制作以及新北网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，新北网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到新北省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
该页面用 PHP 编写，并使用 MySQL 数据库。
其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：
?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysql_query($sql);
echo "table border='1'
tr
thFirstname/th
thLastname/th
thAge/th
thHometown/th
thJob/th
/tr";
while($row = mysql_fetch_array($result))
{
echo "tr";
echo "td" . $row['FirstName'] . "/td";
echo "td" . $row['LastName'] . "/td";
echo "td" . $row['Age'] . "/td";
echo "td" . $row['Hometown'] . "/td";
echo "td" . $row['Job'] . "/td";
echo "/tr";
}
echo "/table";
mysql_close($con);
?
例子解释：
当查询从 JavaScript 被发送到这个 PHP 页面，会发生：
PHP 打开到达 MySQL 服务器的连接
找到拥有指定姓名的 "user"
创建表格，插入数据，然后将其发送到 "txtHint" 占位符
给你个例子，照着改改就成：
html
head
script src="selectuser.js"/script
/head
body
form
Select a User:
select name="users" onchange="showUser(this.value)"
option value="1"Peter Griffin/option
option value="2"Lois Griffin/option
option value="3"Glenn Quagmire/option
option value="4"Joseph Swanson/option
/select
/form
p
div id="txtHint"bUser info will be listed here./b/div
/p
/body
/html
"selectuser.js" 文件中的 JavaScript 代码：
var xmlHttp
function showUser(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="getuser.php"
url=url+"?q="+str
url=url+"sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
其实就是发送一个网络请求，服务端输出的内容就是响应的内容，如jQuery
$.ajax(
{
url: '', // 请求URL
data: '', // 请求时携带的参数
type: '', // 请求方式, GET/POST
dataType: '',// 响应数据格式, text/json
success: r = {
// 请求成功时回调函数，参数 r 为服务端响应的内容
console.log(r); // 就是你说的后台数据
},
error: () = {
console.error('fail'); // 请求失败
}
}
)
// 服务端响应内容
$data = []; // 从数据库中获取的数据
echo json_encode($data); // 响应客户端, 数据格式为 JSON