还是之前的例子，相对来说，用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内置函数5

    Python内置函数5 1.format参考前面字符串方法中的format 2.frozenset([iterable]) iterable -- 可迭代的对象,比如列表.字典.元组等等 返回一个冻结 ...

  2. install composer on ubuntu14.04

    1.download composer $ sudo apt-get install curl $ curl -sS https://getcomposer.org/installer | php $ ...

  3. JavaWeb基础（HTML）

    代码改变世界 HTML HTML是指超本标记语言,它不是编程语言,而是一种标记语言.标记语言是一套标记标签,HTML使用标记标签来描述网页,用以定义如何在页面上展示信息. 1.HTML标签 HTML标 ...

  4. 送信 okhttp

    package jp.co.gunmabank.minefocus.accountApp import android.content.Intentimport android.graphics.Co ...

  5. BZOJ 2179 FFT快速傅立叶 ——FFT

    [题目分析] 快速傅里叶变换用于高精度乘法. 其实本质就是循环卷积的计算,也就是多项式的乘法. 两次蝴蝶变换. 二进制取反化递归为迭代. 单位根的巧妙取值,是的复杂度成为了nlogn 范德蒙矩阵计算逆 ...

  6. c++ 多线程：线程句柄可以提前关闭，但是线程并没有关闭

    很多程序在创建线程都这样写的:ThreadHandle = CreateThread(NULL,0,.....);CloseHandel(ThreadHandle );1,线程和线程句柄(Handle ...

  7. Linux（8）：linux三剑客sed和awk & Shell 编程（1）

    linux 三剑客 之 sed # sed 是什么? # sed : 字符流编辑器 Stream Editor: sed 擅长 替换.取行等 # sed 的功能与版本: 处理纯文本文件.日志.配置文件 ...

  8. 建筑抢修 BZOJ 1029

    建筑抢修 [问题描述] 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的损伤,如果不尽快修 ...

  9. 巧克力王国 BZOJ 2850

    巧克力王国 [问题描述] 巧克力王国里的巧克力都是由牛奶和可可做成的.但是并不是每一块巧克力都受王国人民的欢迎,因为大家都不喜欢过于甜的巧克力.对于每一块巧克力,我们设x和y为其牛奶和可可的含量.由于 ...

  10. JavaScript 的时间消耗--摘抄

    JavaScript 的时间消耗 2017-12-24 dwqs 前端那些事儿 随着我们的网站越来越依赖 JavaScript, 我们有时会(无意)用一些不易追踪的方式来传输一些(耗时的)东西. 在这 ...