您的位置：首页 > 其它

第一次用ajax做的demo(text方式传递数据)

2015-05-13 17:08 309 查看

前端测试页面：

<!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班","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 "参数错误";
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"];
}
?>

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax

相关文章推荐

新的分享

章节导航