深入理解ajax系列第七篇——传递JSON
前面的话
虽然ajax全称是asynchronous javascript and XML。但目前使用ajax技术时，传递JSON已经成为事实上的标准。因为相较于XML而言，JSON简单且方便。本文将上一篇中的实例进行改写，以JSON的方式来进行数据传递
前端页面
<!-- 前端页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{font-size: 20px;margin: 0;line-height: 1.5;}
select,button,input{font-size: 20px;line-height: 1.5;}
</style>
</head>
<body>
<h2>员工查询</h2>
<label>请输入员工编号:</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p> <h2>员工创建</h2>
<form id="postForm">
<label>请输入员工姓名：</label>
<input type="text" name="name"><br>
<label>请输入员工编号：</label>
<input type="text" name="number"><br>
<label>请输入员工性别：</label>
<select name="sex">
<option value="男">男</option>
<option value="女">女</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" name="job"><br>
<button id="save" type="button">保存</button>
</form> <p id="createResult"></p> <script> /*get*/ //查询
var oSearch = document.getElementById('search');
//get方式添加数据
function addURLParam(url,name,value){
url += (url.indexOf("?") == -1 ? "?" : "&");
url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
oSearch.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('searchResult').innerHTML = data.msg;
}else{
document.getElementById('searchResult').innerHTML = '出现错误：' +data.msg;
} }else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求
var url = 'service.php';
url = addURLParam(url,'number',document.getElementById('keyword').value);
xhr.open('get',url,true);
xhr.send();
} /*post*/
//创建
var oSave = document.getElementById('save');
//post方式添加数据
function serialize(form){
var parts = [],field = null,i,len,j,optLen,option,optValue;
for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break;
case undefined: //fieldset
case "file": //file input
case "submit": //submit button
case "reset": //reset button
case "button": //custom button
break;
case "radio": //radio button
case "checkbox": //checkbox
if (!field.checked){
break;
}
/* falls through */
default:
//don't include form fields without names
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
oSave.onclick = function(){
//创建xhr对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//实际操作
var data = JSON.parse(xhr.responseText);
if(data.success){
document.getElementById('createResult').innerHTML = data.msg;
}else{
document.getElementById('createResult').innerHTML = '出现错误：'+data.msg;
} }else{
alert('发生错误：' + xhr.status);
}
}
}
//发送请求
xhr.open('post','service.php',true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(serialize(document.getElementById('postForm')));
}
</script>
</body>
</html>
后端页面
<?php //用于过滤不安全的字符
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//设置页面内容的html编码格式是utf-8
header("Content-Type:application/json;charset=utf-8"); //定义一个多维数组，包含员工的信息，每条员工信息为一个数组
$staff = array(
array("name"=>"洪七","number"=>"101","sex"=>"男","job"=>'总经理'),
array("name"=>"郭靖","number"=>"102","sex"=>"男","job"=>'开发工程师'),
array("name"=>"黄蓉","number"=>"103","sex"=>"女","job"=>'产品经理')
); //判断如果是get请求，则进行搜索；如果是POST请求，则进行新建
//$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
if($_SERVER["REQUEST_METHOD"] == "GET"){
search();
}else if($_SERVER["REQUEST_METHOD"] == "POST"){
create();
} //通过员工编号搜索员工
function search(){
//检查是否有员工编号的参数
//isset检测变量是否设置；empty判断值是否为空
if(!isset($_GET['number']) || empty($_GET['number'])){
echo '{"success":false,"msg":"参数错误"}';
return;
} global $staff;
$number = test_input($_GET['number']);
$result = '{"success":false,"msg":"没有找到员工"}'; //遍历$staff多维数组，查找key值为number的员工是否存在。如果存在，则修改返回结果
foreach($staff as $value){
if($value['number'] == $number){
$result = '{"success":true,"msg":"找到员工：员工编号为' .$value["number"] .'，员工姓名为' .$value["name"] .'，员工性别为' .$value["sex"] .'，员工职位为' .$value["job"] .'"}';
break;
}
}
echo $result;
} //创建员工
function create(){
//判断信息是否填写完全
if(!isset($_POST['name']) || empty($_POST['name']) ||
!isset($_POST['number']) || empty($_POST['number']) ||
!isset($_POST['sex']) || empty($_POST['sex']) ||
!isset($_POST['job']) || empty($_POST['job'])
){
echo '{"success":false,"msg":"参数错误，员工信息填写不全"}';
return;
} echo '{"success":true,"msg":"员工' .test_input($_POST['name']) .'信息保存成功!"}';
}
?>
实例演示
深入理解ajax系列第七篇——传递JSON的更多相关文章
- 深入理解ajax系列第七篇
前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将 ...
- 深入理解ajax系列第八篇——表单提交
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 深入理解ajax系列第八篇
前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是 ...
- 深入理解ajax系列第四篇——请求实例
前面的话 在使用ajax的过程中,常用的请求方式是GET和POST两种.本文将以实例的形式来详细说明这两种请求方式 GET GET是最常见的请求类型,最常用于向服务器查询某些信息.必要时,可以将查询字 ...
- 深入理解ajax系列第三篇——响应解码
前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象 ...
- 深入理解ajax系列第三篇
前面的话 我们接收到的响应主体类型可以是多种形式的,包括字符串String.ArrayBuffer对象.二进制Blob对象.JSON对象.javascirpt文件及表示XML文档的Document对象 ...
- 深入理解ajax系列第四篇——FormData
前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...
- 深入理解ajax系列第四篇
前面的话 现代Web应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2级为此定义了FormData类型.FormData为序列化表单以及创建与表单格式相同的数据提供了便利. ...
- 深入理解ajax系列第三篇——头部信息
前面的话 每个HTTP请求和响应都会带有相应的头部信息,其中有的对开发人员有用.XHR对象提供了操作头部信息的方法.本文将详细介绍HTTP的头部信息 默认信息 默认情况下,在发送XHR请求的同时,还会 ...
随机推荐
- JAVA框架：hibernate（二）
一.事务操作. 代码: @Test public void tr_Up(){ Session session=hibernateUtils.getSession(); Transaction tran ...
- POJ3468（线段树区间求和+区间查询）
https://vjudge.net/contest/66989#problem/C You have N integers, A1, A2, ... , AN. You need to deal w ...
- mysql，int(5)、int(10)啥区别联系
实际没啥区别..这个5和10并不是最大5位,最大10位的意思. 好比选择了int(5),并且当你选择了0填充的话.你的数据假设存了123,那么你的显示会是00123,(有些操作mysql的工具看不出来 ...
- Android应用安全之脆弱的加密
程序员希望通过加密来提升程序的安全性性,但却缺乏专业的密码学背景知识,使得应用对数据的保护非常薄弱.本文将介绍可能出现在Android应用中的一些脆弱的加密方式,以及对应的攻击方法. 造成脆弱加密的主 ...
- Android设备管理器漏洞(转)
一.漏洞描述 目前被称为“史上最强Android木马”的病毒Backdoor.AndroidOS.Obad.a利用Android设备管理器漏洞使用户无法通过正常方式卸载.其实该漏洞早在去年底已被发现. ...
- TLV5620参考电压的问题
1. TLV5620参考电压的,上面红线的VID的意思应该是引脚(REFA-REFD)输入的电压值(3.3V),下面的应该是实际参考值,根据实际测试VID=3.3V的时候,Vref=2.2V,至于为什 ...
- 如何写论文的introduction
重要的是写Introduction.写Introduction就和写童话一样.(转自知乎珵cici) 1. 有一条巨龙抓走了公主 (介绍你的问题为什么值得研究) 2. 巨龙是多么多么多么难打(强调你的 ...
- [CF1083F]The Fair Nut and Amusing Xor[差分+同余分类+根号分治+分块]
题意 给定两个长度为 \(n\) 的序列 \(\{a_i\}\) 与 \(\{b_i\}\),你需要求出它们的相似度.,我们定义这两个序列的相似度为将其中一个序列转化为另一个序列所需的最小操作次数.一 ...
- Django高并发负载均衡
1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...
- java写个自己的mvc框架学习笔记
1. 介绍 MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的 ...