还是之前的例子，相对来说，用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. IIS PUT

    测试版本:IIS6.0 利用工具 1.IIS PUT Scaner By ZwelL 2.桂林老兵IIS写权限利用程序   -------------------------------------- ...

  2. offset家族

  3. web.xml不同的头文件

    <转自:http://blog.csdn.net/qq_16313365/article/details/53783288> 1. Servlet 3.1 Java EE 7 XML sc ...

  4. Repeat Array Generator & String.repeat

    Repeat Array Generator RepeatArrayGenerator "use strict"; /** * * @author xgqfrms * @licen ...

  5. BZOJ 3747: [POI2015]Kinoman 【线段树】

    Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[i]部. 你可以选择l,r(1<=l< ...

  6. 【DFS序+单点修改区间求和】POJ 3321 Apple Tree

    poj.org/problem?id=3321 [题意] 给一棵n个节点的树,每个节点开始有一个苹果,m次操作 1.将某个结点的苹果数异或 1 2.查询一棵子树内的苹果数 #include<io ...

  7. 使用Jackson在Java中处理JSON

    在工作中实际使用到Java处理JSON的情况,且有很大部分都使用的是开源工具Jackson实现的. 一.入门 Jackson中有个ObjectMapper类很是实用,用于Java对象与JSON的互换. ...

  8. EMD距离

    一.场景介绍   最近在研究一个场景:图片质量评分,给一张图片一个预测的分数.   里面提到了用 EMD(Earth Mover’s Distance)算法来评估两张图片之间的分布距离.下面主要讲解下 ...

  9. Andrew Stankevich's Contest (21) J dp+组合数

    坑爹的,,组合数模板,,, 6132 njczy2010 1412 Accepted 5572 MS 50620 KB C++ 1844 B 2014-10-02 21:41:15 J - 2-3 T ...

  10. Laravel 控制器的request

    public function request1(Request $request){ //取值 $name = Request::input('name'); //是否有值 if($request- ...