还是之前的例子，相对来说，用JQ就简单了很多，真的多，因为JQ直接把方法都写好了，直接调用就行了,,ԾㅂԾ,,

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里面需要引入JQ库了

 <!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">

     <!--引入JQ-->

     <script type="text/javascript" src="../PHPTest/Js/jquery-1.12.4.js"></script>

     <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">

         $(document).ready(function (){

             $("#search").click(function () {

                 $.ajax({

                     type:"GET",

                     url:"newJsonPHP.php?id=" + $("#keyword").val(),

                     dataType:"JSON",

                     success:function (data){

                         if (data.success) {

                             $("#searchResult").html(data.msg);

                         } else {

                             $("#searchResult").html("出现错误：" + data.msg);

                         }

                     },

                     error:function (JqXHR) {

                         alert("发生错误：" + JqXHR.status);

                     }

                 });

             });

             $("#save").click(function () {

                 $.ajax({

                     type:"POST",

                     url:"newJsonPHP.php",

                     dataType:"JSON",

                     data:{

                         name:$("#oName").val(),

                         id:$("#oId").val(),

                         age:$("#oAge").val(),

                         MartialArt:$("#oMartialArt").val(),

                     },

                     success:function (data){

                         if (data.success) {

                             $("#createResult").html(data.msg);

                         } else {

                             $("#createResult").html("出现错误：" + data.msg);

                         }

                     },

                     error:function (JqXHR) {

                         alert("发生错误：" + JqXHR.status);

                     }

                 });

             });

         });

     </script>

 </body>

 </html>

Ajax的简单实现(JQuary)的更多相关文章

  1. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

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

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

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 第107天：Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

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

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

  6. AJAX实现简单的注册页面异步请求

    p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...

  7. 让Ajax更简单

    之前写了一篇 ASP.NET中一种超简单的Ajax解决方案 最近把他拿出来更新了下,把demo也搞的更详细了一点 加入了blqw.Json,所以支持更多类型参数和返回值 优化了对exception的处 ...

  8. ASP.NET MVC Ajax.ActionLink 简单用法

    ASP.NET MVC 项目中,如何使用类似于 iframe 的效果呢?或者说 Ajax 局部刷新,比如下面操作: 我们想要的效果是,点击 About 链接,页面不刷新(地址栏不变),然后下面的内容进 ...

  9. AJAX 的简单用法：

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以 ...

随机推荐

  1. Python内置函数6

    Python内置函数6 1.license() 输出当前python 的license信息 A. HISTORY OF THE SOFTWARE ========================== ...

  2. [android开放篇] wifi-direct接口网址

    http://www.android-doc.com/guide/topics/connectivity/wifip2p.html

  3. Zuma （区间DP）

    Genos recently installed the game Zuma on his phone. In Zuma there exists a line of n gemstones, the ...

  4. 九度oj 题目1179：阶乘

    题目描述: 输入n, 求y1=1!+3!+...m!(m是小于等于n的最大奇数)y2=2!+4!+...p!(p是小于等于n的最大偶数). 输入: 每组输入包括1个整数:n 输出: 可能有多组测试数据 ...

  5. iOS学习小结（一）

    1.给类目添加属性需要使用runtime关联 #import <Foundation/Foundation.h> @interface NSURLRequest (AIFNetworkin ...

  6. 刷题总结——卡牌配对（bzoj4205网络流）

    题目: Description 现在有一种卡牌游戏,每张卡牌上有三个属性值:A,B,C.把卡牌分为X,Y两类,分别有n1,n2张. 两张卡牌能够配对,当且仅当,存在至多一项属性值使得两张卡牌该项属性值 ...

  7. vector 类中的 push_back( ) 函数

    函数名 push_back,算法语言里面的一个函数名,如:   1) c++中的vector头文件里面就有这个push_back函数:   2) 在vector类中作用为在vector尾部加入一个数据 ...

  8. [配置Cordova环境] [Alfred使用手册]

    Mac神器 Alfred使用手册http://www.tuicool.com/articles/YJJv2i 配置Cordova环境 1.到nodejs官网下载最新版本,安装pkg文件 2.终端运行 ...

  9. GDOI2018 新的征程

    看标题您一定以为考得很好.. Bad ending.想看美好结局的出门右转其他大佬博客. Day0 早上去车站的时候心情挺好.倒不是因为自己做足了准备,也不是因为预感到有好事发生,而是心情不好也没有用 ...

  10. Codeforces Round #268 (Div. 2) D. Two Sets [stl - set + 暴力]

    8161957                 2014-10-10 06:12:37     njczy2010     D - Two Sets             GNU C++     A ...