之前写的是一般的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)的更多相关文章

  1. Ajax与用户交互的存储格式JSON

    数据存储是JavaScript的核心功能,这是一个在学习前期的一个容易让人迷惑的问题.它并不是那种像页面滑动.幻灯片展示.淡入淡出等吸引人眼球的特效.适当的存放好数据,就有利于我们组织起结构,又能使应 ...

  2. 简单实体Json序列化(输出JSON的属性可变)

    简单实体Json序列化(输出JSON的属性可变) 一.先看效果 可以看出 , 我们在序列化一个对像时, 只给出了 我们想要 输出的两个字段名,  实际实体有5个属性, 经过可变属性序列化后的JSON ...

  3. ajax接收遍历处理json格式数据

    ajax在前后端的交互中应用非常广泛,通过请求后台接口接收处理json格式数据展现在前端页面. 下面我们来简单用 ajax在本地做一个接收并处理json的小例子 首先我们要新建一个叫做data的jso ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. Ajax与服务器（JSON）通信介绍

    本文主要介绍使用Ajax与服务器(JSON)通信方法,谈谈Ajax提供的两类服务器通信手段:同步通信和异步通信.有需要的可以了解一下.毕竟这个时代出了很多东西,自动化构建工具,mvvm框架等等.Jav ...

  6. SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析

    SpringMVC中使用Ajax POST请求以json格式传递参数服务端通过request.getParameter("name")无法获取参数值问题分析 一:问题demo展示 ...

  7. Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

    同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源 ...

  8. 基于JS的ajax的实现，JSON和JSONP，基于JQuery的ajax的实现

    基于JS的ajax的实现,JSON和JSONP,基于JQuery的ajax的实现1.基于JS的ajax的实现 step1: var xmlhttp = XMLHttprequest() #实例化一个对 ...

  9. Django ajax的简单使用、自定义分页器

    一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...

随机推荐

  1. js对文字进行编码

    js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...

  2. HDU-4738 Caocao's Bridges,注意重边不是桥！

    Caocao's Bridges 题意:曹操赤壁之战后卷土重来,他在n个小岛之间建立了m座桥.现在周瑜只有一颗炮弹,他只能炸毁一座桥使得这些岛屿不再连通.每座桥上都可能会有士兵把手,如果想安放***那 ...

  3. Spoj-BOKAM143SOU Checking cubes.

    Given a integer N. Find number of possible ways to represent N as a sum of at most five cubes. Input ...

  4. rest-assured 将log()中的信息打印到log日志中去的方法

    rest-assured 将log()中的信息打印到log日志中去的方法: ============方法1============== PrintStream fileOutPutStream = n ...

  5. 稻草人（bzoj 4237）

    Description JOI村有一片荒地,上面竖着N个稻草人,村民们每年多次在稻草人们的周围举行祭典. 有一次,JOI村的村长听到了稻草人们的启示,计划在荒地中开垦一片田地.和启示中的一样,田地需要 ...

  6. 16.1113 模拟考试T2

    测试题 #4 括号括号[问题描述]有一个长度为?的括号序列,以及?种不同的括号.序列的每个位置上是哪种括号是随机的,并且已知每个位置上出现每种左右括号的概率.求整个序列是一个合法的括号序列的概率.我们 ...

  7. HDU 4770 Lights Against Dudely 暴力枚举+dfs

    又一发吐血ac,,,再次明白了用函数(代码重用)和思路清晰的重要性. 11779687 2014-10-02 20:57:53 Accepted 4770 0MS 496K 2976 B G++ cz ...

  8. python常用模块详解（一）

    一.简介 模块是一个保存了Python代码的文件.模块能定义函数,类和变量.模块里也能包含可执行的代码 模块分为三种: 自定义模块 内置标准模块 开源模块(第三方) 自定义模块: 模块导入 impor ...

  9. python之基本数据类型及深浅拷贝

    一.数据基本类型之set集合 set和dict类似,也是一组key的集合,但不存储value.由于key不能重复,所以,在set中,没有重复的key set集合,是一个无序且不重复的元素集合 1.创建 ...

  10. H5页面基于iScroll.js插件实现下拉刷新，上拉加载更多

    前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...