<!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){
//解析json字符串
var data = JSON.parse(request.responseText);
if(data.success){
document.getElementById("searchResult").innerHTML = data.msg;
}else{
document.getElementById("searchResult").innerHTML = "出現錯誤"+data.msg;
}
}
}
}
};
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){
var data = JSON.parse(request.responseText);
if(data.success){
document.getElementById("createResult").innerHTML=data.msg;
}else{
document.getElementById("createResult").innerHTML="出現錯誤"+data.msg;
}
}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班","sex"=>"男","number"=>102),
array("name"=>"王五","aclass"=>"1班","sex"=>"男","number"=>103)
);
if($_SERVER['REQUEST_METHOD']=="GET"){
search();
}elseif($_SERVER['REQUEST_METHOD']=="POST"){
create();
}
function search() {
if(!isset($_GET["number"]) || empty($_GET["number"])){
echo '{"success":false,"msg":"參數錯誤"}';
return;
}
global $student;
$number = $_GET["number"];
//$result = "沒有找到員工";
foreach($student as $value){
if($value["number"]==$number){
$result = '{"success":true,"msg":"找到學生---學生學號：'.$value["number"].
',學生姓名：'.$value["name"].
',學生性別：'.$value["sex"].'"}';
break;
}else{
$result = '{"success":true,"msg":"沒有找到學生"}';
}
}
echo $result;
}
function create() {
if(!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["aclass"]) || empty($_POST["aclass"])
|| !isset($_POST["sex"]) ||empty($_POST["sex"])){
echo '{"success":false,"msg":"參數錯誤"}';
return ;
}
echo '{"success":true,"msg":"學生'.$_POST["name"].'信息保存成功"}';
}
?>
