前端测试页面：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>ajax demo</title>
</head>
<body>
<h1>请输入查询编号</h1>
<input type=text id="keyword">
<input type="button" id="search" value="查询">
<p id="searchResult"></p>
<h1>请输入以下信息</h1>
<lable>姓名：</lable><input type="text" id="name">
<lable>班级：</lable><input type="text" id="aclass">
<lable>年龄</lable>
<select id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="button" id="create" value="提交">
<p id="createResult"></p>
<script>
var request=null;
document.getElementById("search").onclick = function() {
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}
request.open("GET","index.PHP?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
document.getElementById("searchResult").innerHTML = request.responseText;
}else{
alert("发生错误"+request.status);
}
}
}
};
document.getElementById("create").onclick = function() {
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("POST","index.PHP");
var data = "name="+document.getElementById("name").value
+"&aclass="+document.getElementById("aclass").value
+"&sex="+document.getElementById("sex").value;
//代表提交的是表单类型，用post提交的一定要设置
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send(data);
request.onreadystatechange = function() {
if(request.readyState===4){
if(request.status===200){
document.getElementById("createResult").innerHTML = request.responseText;
}else{
alert("request error"+request.status);
}
}
}
};
</script>
</body>
</html>
后台测试页面：
<?PHP
//header("Content-Type:application/json;charset=utf-8");
header("Content-Type:text/plain;charset=utf-8");//代表提交的数据是文本类型
//header("Content-Type:text/xml;charset=utf-8");
//header("Content-/Type:text/html;charset=utf-8");
//header("Content-Type"application/javascript;charset=utf-8");
$student = array
(
array("name"=>"张三","aclass"=>"1班","sex"=>"男","number"=>101),array("name"=>"李四","aclass"=>"2班","number"=>102),array("name"=>"王五","number"=>103)
);
if($_SERVER['REQUEST_METHOD']=="GET"){
search();
}elseif($_SERVER['REQUEST_METHOD']=="POST"){
create();
}
function search() {
if(!isset($_GET["number"]) || empty($_GET["number"])){
echo "参数错误";
return;
}
global $student;
$number = $_GET["number"];
$result = "没有找到员工";
foreach($student as $value){
if($value["number"]==$number){
$result = "找到学生---学生学号：".$value["number"].",学生姓名:".$value["name"].
",学生班级：".$value["aclass"].",学生性别:".$value["sex"];
break;
}
}
echo $result;
}
function create() {
if(!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["aclass"]) || empty($_POST["aclass"])
|| !isset($_POST["sex"]) ||empty($_POST["sex"])){
echo "参数错误...";
return ;
}
echo $_POST["name"]."学生信息保存成功";
// echo $_POST["name"]."--".$_POST["aclass"]."--".$_POST["sex"];
}
?>结果：