还是之前的例子，相对来说，用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. Leetcode 335.路径交叉

    路径交叉 给定一个含有 n 个正数的数组 x.从点 (0,0) 开始,先向北移动 x[0] 米,然后向西移动 x[1] 米,向南移动 x[2] 米,向东移动 x[3] 米,持续移动.也就是说,每次移动 ...

  2. php 注册与登录

    <body background="timg.jpg"><div class="dak"> <div class="zu ...

  3. [LOJ#2270][BZOJ4912][SDOI2017]天才黑客

    [LOJ#2270][BZOJ4912][SDOI2017]天才黑客 试题描述 SD0062 号选手小 Q 同学为了偷到 SDOI7012 的试题,利用高超的黑客技术潜入了 SDOI 出题组的内联网的 ...

  4. BZOJ 4516 [Sdoi2016]生成魔咒 ——后缀自动机

    本质不同的字串,考虑SA的做法,比较弱,貌似不会. 好吧,只好用SAM了,由于后缀自动机的状态最简的性质, 所有不同的字串就是∑l[i]-l[fa[i]], 然后后缀自动机是可以在线的,然后维护一下就 ...

  5. MyEclipse6.5增加对Tomcat7的支持

    MyEclipse6.5增加对Tomcat7的支持 最近在研究Servlet3.0,它是JavaEE6.0规范中的一部分 而Servlet3.0对服务器是有要求的,比如Tomcat7+(而Tomcat ...

  6. 二分图最小覆盖的Konig定理及其证明,最小的覆盖证明

    [转http://www.cppblog.com/abilitytao/archive/2009/09/02/95147.html  ->  http://yejingx.ycool.com/p ...

  7. [其他] 关于C语言中使用未声明函数的问题

    在c语言中,碰到一个.c文件,无.h头文件,在另一.c文件调用函数时,并没有进行声明extern, 此时编译器不会报错,会默认去查找同名的函数,这样会存在一些问题,查了些资料,稍微总结了下: 总结: ...

  8. 让win7任务条上的文件夹打开是c,d,e,f而不是库

    如果资源管理器是打开的,则右键点击资源管理器的图标,在跳出的菜单中,右键点击“Windows资源管理器”,选择“属性”. 在“快捷方式’选项卡,“目标”一栏,默认的是 %windir%\explore ...

  9. rdb转为rdf

    dump-rdf -f N-TRIPLE -b http://localhost:2020/  -o iswc.nt terrsearch.ttl

  10. tcp-time-wait-state

    https://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux