ajax.php如下:
<?php $name = !empty($_POST['name']) ? trim($_POST['name']) : '没有数据'; $pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有数据'; echo '用户名:', $name, '密码:', $pwd;
单击submit后发送post请求,弹出响应信息。
5、返回值json,html,text,xml
返回值只有两种text,和xml。不过text内容中可以是一段html或json结构的字符串。
(1)、返回json格式
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box">
<select id="city"></select>
<input type="button" value="获取" id="get" />
</div>
</body>
<script type="text/javascript">
var get = document.getElementById("get");
var city = document.getElementById("city");
get.onclick = function () {
//创建XHR对象
var xhr = new XMLHttpRequest();
//设置请求URL
var url = "./ajax.php";
//设置XHR对象readyState变化时响应函数
xhr.onreadystatechange = function () {
//readyState是请求的状态,为4表示请求结束
if (xhr.readyState == 4) {
//responseText服务器响应的内容
//通过eval把传来的json字符串转成对象
var data = eval(this.responseText);
var str = "";
for(var ix in data) {
str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";
}
city.innerHTML = str;
}
};
//打开链接
xhr.open("get", url, true);
//发送请求
xhr.send(null);
}
</script>
</html>
ajax.php如下:
<?php
$data = array(
array('id' => 1, 'name' => '上海'),
array('id' => 2, 'name' => '北京'),
array('id' => 3, 'name' => '深圳'),
);
echo json_encode($data);
(2)、返回xml格式
xml通过responseXML来读取,responseXML不是字符串,是DOM对象。
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="box">
<div id="news"></div>
<input type="button" value="获取" id="get" />
</div>
</body>
<script type="text/javascript">
var get = document.getElementById("get");
var news = document.getElementById("news");
get.onclick = function () {
//创建XHR对象
var xhr = new XMLHttpRequest();
//设置请求URL
var url = "./ajax.php";
//设置XHR对象readyState变化时响应函数
xhr.onreadystatechange = function () {
//readyState是请求的状态,为4表示请求结束
if (xhr.readyState == 4) {
//responseXML服务器响应的内容
var data = this.responseXML;
var str = "";
var title = data.getElementsByTagName("title");
str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";
str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";
str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";
news.innerHTML = str;
}
};
//打开链接
xhr.open("get", url, true);
//发送请求
xhr.send(null);
}
</script>
</html>







