Javascript 和 json 使用Ajax
2016-01-29 11:59
676 查看
基本步骤
目前json的使用非常流行,所以ajax也经常和json结合在一块使用。json主要用在ajax客户端和服务器的交互上,所以基本步骤与文章Javascript 使用Ajax类似。
客户端
对于客户端,区别实在对服务器返回的数据的判断上:var data = JSON.parse(request.responseText); if(data.success){ document.getElementById("searchRes").innerHTML = data.msg; }else{ document.getElementById("searchRes").innerHTML = "查询失败:"+data.msg; }
服务器返回的json格式:
查询成功:
{"success":true,"msg":"员工编号:110,员工姓名:卡卡西,员工职位:保安队长"}
查询失败:
{"success":false,"msg":"没有查询到该员工信息"}
客户端首先对返回的json数据,使用
JSON.parse方法将json数据转化为对象,然后通过判断对象的success属性,判断查询是否成功。
服务器端
服务器端程序跟Javascript 使用Ajax基本类似。主要区别实在返回数据上,原来返回的数据格式是纯文本,现在返回json格式数据。header("Content-Type: application/json;charset=utf-8");
$result = '{"success":false,"msg":"请求失败,没有找到编号为'.$id.'的员工"}';
$msg = "找到员工<br/>员工编号:".$id.",员工姓名:".$row['name'].",员工职位:".$row['job']; $result = '{"success":true,"msg":"'.$msg.'"}';
实例演示
XMLHttpRequestJson.html<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>XMLHttpRequestJson</title>
<style type="text/css">
*{
font-size:25px;
line-height:1.8;
}
</style>
</head>
<body>
<h1>查询员工</h1>
员工编号:<input type="text" id="keyword"/>
<input type="button" id="search" value="查询"/><br/>
<p id="searchRes"></p>
<h1>添加员工</h1>
员工编号:<input type="text" id="id"/><br/>
员工姓名:<input type="text" id="name"/><br/>
员工职位:<input type="text" id="job"/><br/>
<input type="button" id="add" value="添加"/><br/>
<p id="addRes"></p>
<script>
//查询员工
document.getElementById("search").onclick = function(){
var request = new XMLHttpRequest();
request.open("GET","serverJson.php?id="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
var data = JSON.parse(request.responseText); if(data.success){ document.getElementById("searchRes").innerHTML = data.msg; }else{ document.getElementById("searchRes").innerHTML = "查询失败:"+data.msg; }
}else{
document.getElementById("searchRes").innerHTML = "发生错误:"+request.status;
}
}
}
}
//添加员工
document.getElementById("add").onclick = function(){
var request = new XMLHttpRequest();
request.open("POST","serverJson.php");
var data = "id="+document.getElementById("id").value+"&name="+document.getElementById("name").value+"&job="+document.getElementById("job").value;
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("addRes").innerHTML = data.msg;
}else{
document.getElementById("addRes").innerHTML = "添加失败:"+data.msg;
}
}else{
document.getElementById("addRes").innerHTML = "发生错误:"+request.status;
}
}
}
}
</script>
</body>
</html>
serverJson.php
<?php
header("Content-Type: application/json;charset=utf-8");
if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}elseif($_SERVER["REQUEST_METHOD"] == "POST"){
add();
}
function search(){
//判断职工编号是否正确填写
if(!isset($_GET["id"]) || empty($_GET["id"])){
echo '{"success":false,"msg":"参数错误"}';
return;
}
$id = $_GET["id"];
$result = '{"success":false,"msg":"请求失败,没有找到编号为'.$id.'的员工"}';
$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "SELECT * FROM staff WHERE id=".$id;
$res = $mysqli->query($sql);
$row = $res->fetch_assoc();
if(is_array($row) && $row['id']==$id){
$msg = "找到员工<br/>员工编号:".$id.",员工姓名:".$row['name'].",员工职位:".$row['job']; $result = '{"success":true,"msg":"'.$msg.'"}';
}
echo $result;
$mysqli->close();
}
function add(){
//判断信息是否填写完整
if(isset($_POST["id"])&&isset($_POST["name"])&&isset($_POST["job"])&&!empty($_POST["id"])&&!empty($_POST["name"])&&!empty($_POST["job"])){
$id = $_POST["id"];
$name = $_POST["name"];
$job = $_POST["job"];
$mysqli = new mysqli('localhost', 'root', '', 'test');
$mysqli->query("SET NAMES UTF8");
$sql = "INSERT INTO staff(id,name,job) VALUES ($id,'$name','$job')";
$result = $mysqli->query($sql);
if($result==true){
echo '{"success":true,"msg":"添加员工操作成功"}';
}
$mysqli->close();
}else{
echo '{"success":false,"msg":"信息填写不完整"}';
}
}
相关文章推荐
- JS获取url参数及url编码、解码
- js ==与===区别(两个等号与三个等号)
- 常用的json解析方式
- js获取checkbox中所有选中值及input后面所跟的文本
- JavaScript高级程序设计学习笔记——引用类型2Function类型(重要)
- CommonJS与AMD
- Extjs String转Json
- Javascript模块化编程(一):模块的写法
- 使用js实现“别踩白块儿”游戏
- html+js图片上传预览
- javaScript 与OC方法的调用
- js倒计时
- 动态创建按钮的JavaScript代码
- JavaScript面向对象初探——原型链、封装和继承
- js数值使用及数组转json,转化后的json传入后台解析
- 根据iPhone6设计稿动态计算rem值
- 使用js实现tab选项卡效果
- js动态创建按钮
- ArcGIS api for javascript加载shapefile
- 第 1 章 简单认识 JavaScript