Ajax的简单实现(JQuary)
生活随笔
收集整理的這篇文章主要介紹了
Ajax的简单实现(JQuary)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
還是之前的例子，相對來說，用JQ就簡單了很多，真的多，因為JQ直接把方法都寫好了，直接調(diào)用就行了,,???,,
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數(shù)據(jù)格式 20 echo '{"success":false, "msg":"輸入?yún)?shù)錯誤"}'; 21 return; 22 } 23 24 global $nClass; 25 $ID = $_GET["id"]; 26 //改成Json數(shù)據(jù)格式 27 $result = '{"success":false,"msg":"沒有該學(xué)員"}'; 28 29 foreach ($nClass as $idValue) { 30 if ($idValue["id"] == $ID) { 31 //改成Json數(shù)據(jù)格式 32 $result = '{"success":true,"msg":"找到該學(xué)員：學(xué)號：'.$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數(shù)據(jù)格式 46 echo '{"success":false,"msg":"輸入?yún)?shù)錯誤，學(xué)員信息不完全"}'; 47 return; 48 } 49 //改成Json數(shù)據(jù)格式 50 echo '{"success":true,"msg":"學(xué)員：'.$_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>請輸入人物學(xué)號：</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>請輸入學(xué)號：</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("出現(xiàn)錯誤：" + data.msg); 42 } 43 }, 44 error:function (JqXHR) { 45 alert("發(fā)生錯誤：" + 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("出現(xiàn)錯誤：" + data.msg); 66 } 67 }, 68 error:function (JqXHR) { 69 alert("發(fā)生錯誤：" + JqXHR.status); 70 } 71 }); 72 }); 73 74 75 }); 76 77 78 79 </script> 80 </body> 81 </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/WhiteM/p/6785589.html
總結(jié)
以上是生活随笔為你收集整理的Ajax的简单实现(JQuary)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【2017-04--28】Winform
- 下一篇： 一轮项目冲刺——移山小分队（2）