Ajax的简单实现(JQuary)

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

php文件就不需要多做修改了，如下：

 1 <?php
 2 //改变Content-Type属性
 3 header("Content-Type:application/json;charset:utf-8");
 4 $nClass = array(
 5     array("name" => "龙傲天","id" => "1","age" => "12","MartialArt" => "剑宗"),
 6     array("name" => "钟岳","id" => "2","age" => "22","MartialArt" => "剑门山"),
 7     array("name" => "叶凡","id" => "3","age" => "18","MartialArt" => "圣地")
 8 );
 9
10 if ($_SERVER["REQUEST_METHOD"] == "GET"){
11     nSearch();
12 } elseif ($_SERVER["REQUEST_METHOD"] == "POST") {
13     # code...
14     nCreate();
15 }
16
17 function nSearch(){
18     if (!isset($_GET["id"])||empty($_GET["id"])){
19         //改成Json数据格式
20         echo '{"success":false, "msg":"输入参数错误"}';
21         return;
22     }
23
24     global $nClass;
25     $ID = $_GET["id"];
26     //改成Json数据格式
27     $result = '{"success":false,"msg":"没有该学员"}';
28
29     foreach ($nClass as $idValue) {
30         if ($idValue["id"] == $ID) {
31             //改成Json数据格式
32             $result = '{"success":true,"msg":"找到该学员：学号：'.$idValue["id"].',姓名：'.$idValue["name"].',年龄：'.$idValue["age"].',门派：'.$idValue["MartialArt"].'"}';
33             break;
34         }
35     }
36
37     echo $result;
38 }
39
40 function nCreate(){
41     if (!isset($_POST["name"]) || empty($_POST["name"])
42     || !isset($_POST["id"]) || empty($_POST["id"])
43     || !isset($_POST["age"]) || empty($_POST["age"])
44     || !isset($_POST["MartialArt"]) || empty($_POST["MartialArt"])){
45         //改成Json数据格式
46         echo '{"success":false,"msg":"输入参数错误，学员信息不完全"}';
47         return;
48      }
49         //改成Json数据格式
50         echo '{"success":true,"msg":"学员：'.$_POST["name"].'信息保存成功！"}';
51 }
52
53
54 ?>

Html里面需要引入JQ库了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <!--引入JQ-->
 8     <script type="text/javascript" src="../PHPTest/Js/jquery-1.12.4.js"></script>
 9     <title>Document</title>
10 </head>
11 <body>
12     <h1>人物查询</h1>
13     <label>请输入人物学号：</label>
14     <input type="text" id="keyword">
15     <button id="search">查询</button>
16     <p id="searchResult"></p>
17
18     <h1>人物新建</h1>
19     <label>请输入姓名：</label>
20     <input type="text" id="oName"><br>
21     <label>请输入学号：</label>
22     <input type="text" id="oId"><br>
23     <label for="">请输入年龄：</label>
24     <input type="text" id="oAge"><br>
25     <label>请输入门派：</label>
26     <input type="text" id="oMartialArt"><br>
27     <button id="save">保存</button>
28     <p id="createResult"></p>
29
30     <script type="text/javascript">
31         $(document).ready(function (){
32             $("#search").click(function () {
33                 $.ajax({
34                     type:"GET",
35                     url:"newJsonPHP.php?id=" + $("#keyword").val(),
36                     dataType:"JSON",
37                     success:function (data){
38                         if (data.success) {
39                             $("#searchResult").html(data.msg);
40                         } else {
41                             $("#searchResult").html("出现错误：" + data.msg);
42                         }
43                     },
44                     error:function (JqXHR) {
45                         alert("发生错误：" + JqXHR.status);
46                     }
47                 });
48             });
49
50             $("#save").click(function () {
51                 $.ajax({
52                     type:"POST",
53                     url:"newJsonPHP.php",
54                     dataType:"JSON",
55                     data:{
56                         name:$("#oName").val(),
57                         id:$("#oId").val(),
58                         age:$("#oAge").val(),
59                         MartialArt:$("#oMartialArt").val(),
60                     },
61                     success:function (data){
62                         if (data.success) {
63                             $("#createResult").html(data.msg);
64                         } else {
65                             $("#createResult").html("出现错误：" + data.msg);
66                         }
67                     },
68                     error:function (JqXHR) {
69                         alert("发生错误：" + JqXHR.status);
70                     }
71                 });
72             });
73
74
75         });
76
77
78
79     </script>
80 </body>
81 </html>

转载于:https://www.cnblogs.com/WhiteM/p/6785589.html

Ajax的简单实现(JQuary)相关推荐

Ajax实现简单用户名重名查询
很早就想发布这篇POST了,Ajax实现简单用户名重名查询,引用了xmlhttprequest object pool,如下: XMLHttpRequest Object Pool /** * XM ...
ajax 示例代码,Ajax的简单实用实例代码
我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在UsersAction类中的checkUser方法中接收并验证前台的表单数据,针对不同情况,返回一个状态码cod ...
html option ajax,Ajax实现简单下拉选项效果【推荐】
基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: 请选择请选择 2.Javascript中进行创建选项和执行AJAX异步请求步骤如下 ...
php ajax简单实例代码,Ajax的简单实用实例代码
这篇文章主要介绍了Ajax的简单实用实例代码,对ajax感兴趣的朋友可以参考下Ajax的简单实用的方法我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在User ...
新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy
[索引页] [×××] 新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(ScriptManager.ScriptManagerProxy.UpdatePanel. UpdatePro ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
ajax简单实例代码,分享Ajax创建简单实例代码
XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而 ...
创建ajax及用法,Ajax的简单使用
对于常见的Ajax使用,大概过程如下 1.创建xmlhttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ ...
AJAX实现简单的注册页面异步请求
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更 ...

Ajax的简单实现(JQuary)

Ajax的简单实现(JQuary)相关推荐

最新文章

热门文章