Ajax的简单实现(Json)
之前写的是一般的Ajax
if (request.status === 200) { document.getElementById("createResult").innerHTML = request.responseText; }
可以看到值的接收是通过request.responseText来接收的
而通过这种直接判断纯文本的方式是不太灵活的
通过Json这种数据格式，会方便很多
把之前的例子重新用Json写一遍
PHP页面
<?php
//改变Content-Type属性
header("Content-Type:application/json;charset:utf-8");
$nClass = array(
array("name" => "龙傲天","id" => "1","age" => "12","MartialArt" => "剑宗"),
array("name" => "钟岳","id" => "2","age" => "22","MartialArt" => "剑门山"),
array("name" => "叶凡","id" => "3","age" => "18","MartialArt" => "圣地")
); if ($_SERVER["REQUEST_METHOD"] == "GET"){
nSearch();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
# code...
nCreate();
} function nSearch(){
if (!isset($_GET["id"])||empty($_GET["id"])){
//改成Json数据格式
echo '{"success":false, "msg":"输入参数错误"}';
return;
} global $nClass;
$ID = $_GET["id"];
//改成Json数据格式
$result = '{"success":false,"msg":"没有该学员"}'; foreach ($nClass as $idValue) {
if ($idValue["id"] == $ID) {
//改成Json数据格式
$result = '{"success":true,"msg":"找到该学员：学号：'.$idValue["id"].',姓名：'.$idValue["name"].',年龄：'.$idValue["age"].',门派：'.$idValue["MartialArt"].'"}';
break;
}
} echo $result;
} function nCreate(){
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["id"]) || empty($_POST["id"])
|| !isset($_POST["age"]) || empty($_POST["age"])
|| !isset($_POST["MartialArt"]) || empty($_POST["MartialArt"])){
//改成Json数据格式
echo '{"success":false,"msg":"输入参数错误，学员信息不完全"}';
return;
}
//改成Json数据格式
echo '{"success":true,"msg":"学员：'.$_POST["name"].'信息保存成功！"}';
} ?>
HTML页面
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<h1>人物查询</h1>
<label>请输入人物学号：</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<p id="searchResult"></p> <h1>人物新建</h1>
<label>请输入姓名：</label>
<input type="text" id="oName"><br>
<label>请输入学号：</label>
<input type="text" id="oId"><br>
<label for="">请输入年龄：</label>
<input type="text" id="oAge"><br>
<label>请输入门派：</label>
<input type="text" id="oMartialArt"><br>
<button id="save">保存</button>
<p id="createResult"></p> <script type="text/javascript">
var nSearch = document.getElementById("search");
var key = document.getElementById("keyword");
var sResult = document.getElementById("searchResult");
nSearch.onclick = function () {
var request = new XMLHttpRequest();
request.open("GET", "newJsonPHP.php?id=" + key.value);
request.send();
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200) {
var data = JSON.parse(request.responseText);
if (data.success) {
sResult.innerHTML = data.msg;
} else {
sResult.innerHTML = "输入错误：" + data.msg;
}
}
}
}
}
var nSave = document.getElementById("save");
var oName = document.getElementById("oName");
var oId = document.getElementById("oId");
var oAge = document.getElementById("oAge");
var oMartialArt = document.getElementById("oMartialArt");
var oResult = document.getElementById("createResult"); nSave.onclick = function () {
var request = new XMLHttpRequest();
request.open("POST", "newJsonPHP.php")
var data = "name=" + oName.value + "&id=" + oId.value + "&age=" + oAge.nodeValue + "&MartialArt=" +
oMartialArt
.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) {
oResult.innerHTML = data.msg;
} else {
oResult.innerHTML = "出现错误：" + data.msg;
}
} else {
alert("发生错误：" + request.status);
}
}
}
}
</script> </body> </html>
Ajax的简单实现(Json)的更多相关文章
- Ajax与用户交互的存储格式JSON
数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应 ...
- 简单实体Json序列化(输出JSON的属性可变)
简单实体Json序列化(输出JSON的属性可变) 一.先看效果 可以看出 , 我们在序列化一个对像时, 只给出了 我们想要 输出的两个字段名, 实际实体有5个属性, 经过可变属性序列化后的JSON ...
- ajax接收遍历处理json格式数据
ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- Ajax与服务器（JSON）通信介绍
本文主要介绍使用Ajax与服务器(JSON)通信方法,谈谈Ajax提供的两类服务器通信手段:同步通信和异步通信.有需要的可以了解一下.毕竟这个时代出了很多东西,自动化构建工具,mvvm框架等等.Jav ...
- SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析
SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...
- Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法
同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...
- 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现
基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
随机推荐
- CSU-1336: Interesting Calculator，最短路思想！
1336: Interesting Calculator 这道题被LZQ抢了一血,于是去读题发现题意不难,纯广搜结果写的一塌糊涂. 题意:给你两个数x,y.由x每次可以经过一系列操作变换,每个变换都有 ...
- 九度oj 题目1090：路径打印
题目描述: 给你一串路径,譬如:a\b\c a\d\e b\cst d\你把这些路径中蕴含的目录结构给画出来,子目录直接列在父目录下面,并比父目录向右缩一格,就像这样:a b c d ...
- C/C++ 位操作
C/C++对位操作有如下方法: <1>位操作运算符(注意:下面几个运算符不改变原来的变量的值,只是获得运算的结果即一个新值) 按位取反:~ 位与:& 位或:| 位异或:^ 左移位运 ...
- BZOJ 3227 [Sdoi2008]红黑树(tree) ——贪心 动态规划
首先可以想到一个贪心的方法,然后一层一层的合并. 也可以采用动态规划的方式,为了写起来好写,把点数*2+1,然后发现在本机上跑不过1500的数据. 交上去居然A掉了. 贪心 #include < ...
- HTML中字体单位px pt em之间的转换
在实现打印功能时,遇到一个问题,使用px作为单位在不同的机器或者打印机上打印出的字体大小不一样,所以经过查询,发现使用pt为单位能够进行物流适配,下面是各单位之间的转换: 定义字体大小有常见三种单位, ...
- windows创建任务计划(周期执行bat脚本)
https://jingyan.baidu.com/article/ca00d56c767cfae99febcf73.html windows找到任务计划程序: 这台电脑->管理
- leetcode 331. Verify Preorder Serialization of a Binary Tree
传送门 331. Verify Preorder Serialization of a Binary Tree My Submissions QuestionEditorial Solution To ...
- MyBatis的参数，不能传入null
今天在调试的过程中发现一个bug,把传入的参数写到查询分析器中执行没有问题,但是在程序中执行就报错:org.springframework.jdbc.UncategorizedSQLException ...
- Linux 系统的常用命令之 rm ，rm -rf , rm -f 以及rm 命令的其他参数命令
1.rm -rf * 删除当前目录下的所有文件,这个命令很危险,应避免使用. 所删除的文件,一般都不能恢复! 2.rm -f 其中的,f参数 (f --force ) 忽略不存在的文件,不显示任何信息 ...
- Idea基本讲解、常用配置以及快捷键设置
IDEA官网学习文档:https://www.jetbrains.com/idea/documentation/ IDEA官网入门教程:https://www.jetbrains.com/help/i ...