简单ajax
变身！卡布达
在移动后台无聊复制粘贴文档一天，下班急吼吼回宿舍 今天要学ajax！！！
因为需要2个文件 前台的HTML和js代码 后台的php代码 偷懒就没写数据库 只为了实现功能！！
前台代码
<body>
<input type="text" id="scr"><input id="cx" type="submit" value="点击查询"><br>
<p id="c"></p>
<br />
<br />
<input type="text" id="name"><br />
<input type="text" id="sex"><br />
<input type="text" id="id"><br />
<input id="save" type="submit" value="保存"><br>
<p id="d"></p>
<script>
//点击查询时查询
document.getElementById("cx").onclick=function(){
//建立XHR对象
var request=new XMLHttpRequest();
//获取查询值
var d=document.getElementById('scr').value;
//get方式调用http请求
request.open('GET','ajax.php?id='+d,true);
//发送到服务器
request.send();
//获取redystate状态码
request.onreadystatechange=function(){
//等于4 请求已经成功
if(request.readyState===4){
//等于200响应成功
if(request.status===200){
//获取响应结果并且返回到html页面
//解析格式化json数据
var data=JSON.parse(request.responseText);
//判断是否成功
if(data.success==="true"){
document.getElementById("c").innerHTML=data.msg;
}else{
document.getElementById("c").innerHTML="出现错误:"+data.msg;
}
}else{
//获取异常信息
alert(request.status);
}
}
}
}
//ajax注册信息
//点击查询时查询
document.getElementById("save").onclick=function(){
//建立XHR对象
var request=new XMLHttpRequest();
//获取查询值
var data="name="+document.getElementById('name').value
+"&sex="+document.getElementById('sex').value
+"&id="+document.getElementById('id').value
;
//POST方式调用http请求
request.open('POST','ajax.php',true);
//注意POST方式必须声明
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送数据到服务器
request.send(data);
//获取redystate状态码
request.onreadystatechange=function(){
//等于4 请求已经成功
if(request.readyState===4){
//等于200响应成功
if(request.status===200){
//获取响应结果并且返回到html页面
var data=JSON.parse(request.responseText);
//判断是否成功
if(data.success==="true"){
document.getElementById("d").innerHTML=data.msg;
}else{
document.getElementById("d").innerHTML="出现错误:"+data.msg;
}
}else{
//获取异常信息
alert(request.status);
}
}
}
}
</script>
服务器端代码
<?php
//header("Content-Type:text/plain;charset=UTF-8");
//json声明
header("Content-Type:application/json;charset-UTF-8");
//生成数据库 偷懒啦~~~~不用mysql了
$data=array(
array(
"id"=>2,
"name"=>"cx",
"sex"=>"女",
),
array(
"id"=>1,
"name"=>"jh",
"sex"=>"男",
),
);
//判断请求方式调用不同函数
if($_SERVER["REQUEST_METHOD"]=="GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
//查询
function search(){
if(!isset($_GET['id'])){
echo '{"success":"false","msg":"参数错误!"}';
return;
}
$results='{"success":"false","msg":"没有找到员工!"}';
global $data;
foreach ($data as $value) {
if(($_GET['id'])==$value['id']){
$results='{"success":"true","msg":"找到员工 姓名为'.$value["name"].'"}';
break;
}
}
echo $results;
}
//添加
function create(){
if(!$_POST["id"]||!$_POST["name"]||!$_POST["sex"]){
echo '{"success":"false","msg":"参数不完整!"}';
return;
}
//偷懒 不add什么的 巴拉巴拉
echo '{"success":"true","msg":"员工'.$_POST["name"].'保存成功!"}';
}
?>
晚上12点咯，今天到此为止明天还要上班！嚯嚯嚯 我还没学到json呢