Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get、post方式提交和请求数据
知识要点：
$('#userName').blur(function () { var txt = $(this).val(); $.ajax({ type:'GET', // 默认是get url:'01_JQ_AJAX_get.php', data:{ userName : txt }, success : function (res) { $('#tips').html(res); }, error:function (res) { $('#tips').html(res.statusText); console.log('error',res); } , // 完成时候的回调函数,不管成功还是失败都会执行的回调函数 complete:function (res) { console.log('complete',res); } }); }); $('#userName').blur(function () { // $.get("01_JQ_AJAX_step.php",function (res) { // $("#tips").html( res ); // }); // var txt = $(this).val(); // $.post("03_JQ_AJAX_post.php",{ userName:txt },function (res) { // $("#tips").html( res ); // }); });
1.GET方式请求提交数据
客户端: JQ_AJAX_get.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .tips{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <form action="01_register.php" method="get"> 14 <p class="tips" id="tips"></p> 15 用户名<input type="text" name="userName" id="userName"/> 16 密码<input type="password" name="userPwd" id="userPwd"/> 17 <input type="submit" value="登录"> 18 </form> 19 </body> 20 </html> 21 <script src="lib/jquery-1.12.2.js"></script> 22 <script> 23 $('#userName').blur(function () { 24 /** 25 * $.ajax({}); 26 * url 服务器地址 27 * */ 28 var txt = $(this).val(); 29 $.ajax({ 30 type:'GET', 31 url:'JQ_AJAX_get.php', 32 data:{ 33 userName : txt 34 }, 35 success : function (res) { 36 $('#tips').html(res); 37 } 38 }); 39 }); 40 </script>
服务器: JQ_AJAX.php
1 <?php 2 /** 3 * Created by qinpeizhou. 4 * Date: 2017/11/10 5 * Time: 15:03 6 * Email : 1031219129@qq.com 7 */ 8 header('Content-Type:text/html;charset=utf-8;'); 9 // echo 'Success，你成功的从PHP服务器拿到了数据'; 10 $uName = $_GET['userName']; 11 $users = ["jack",'rose','tom']; 12 $isExist = in_array($uName,$users); 13 if($isExist) { 14 echo "该帐号已注册，换一个试试"; 15 }else{ 16 echo "你可以注册"; 17 }
2.POST方式请求提交数据
客户端： JQ_AJAX_post.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .tips{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <form action="01_register.php" method="get"> 14 <p class="tips" id="tips"></p> 15 用户名<input type="text" name="userName" id="userName"/> 16 密码<input type="password" name="userPwd" id="userPwd"/> 17 <input type="submit" value="登录"> 18 </form> 19 </body> 20 </html> 21 <script src="lib/jquery-1.12.2.js"></script> 22 <script> 23 $('#userName').blur(function () { 24 /** 25 * $.ajax({}); 26 * url 服务器地址 27 * type: 请求类型 28 * */ 29 var txt = $(this).val(); 30 $.ajax({ 31 type:'POST', 32 url:'JQ_AJAX_post.php', 33 data:{ 34 userName : txt 35 }, 36 success : function (res) { 37 $('#tips').html(res); 38 } 39 }); 40 }); 41 </script>
服务器端:JQ_AJAX_post
1 <?php 2 /** 3 * Created by qinpeizhou. 4 * Date: 2017/11/10 5 * Time: 15:03 6 * Email : 1031219129@qq.com 7 */ 8 header('Content-Type:text/html;charset=utf-8;'); 9 // echo 'Success，你成功的从PHP服务器拿到了数据'; 10 $uName = $_POST['userName']; 11 $users = ["jack",'rose','tom']; 12 $isExist = in_array($uName,$users); 13 if($isExist) { 14 echo "该帐号已注册，换一个试试"; 15 }else{ 16 echo "你可以注册"; 17 }
二.JQuery+Ajax解析Json、XML数据
1.解析Json数据：
nav.json
1 [ 2 { 3 "link":"http://www.jd.com", 4 "src":"images/nav_1.png", 5 "text":"京东超市" 6 }, 7 { 8 "link":"http://www.taobao.com", 9 "src":"images/nav_2.png", 10 "text":"全球购" 11 }, 12 { 13 "link":"http://www.mi.com", 14 "src":"images/nav_3.png", 15 "text":"服装城" 16 }, 17 { 18 "link":"http://www.163.com", 19 "src":"images/nav_4.png", 20 "text":"京东生鲜" 21 } 22 23 ]
客户端：nav_json.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav{ 13 border: 1px solid #ddd; 14 } 15 .nav li { 16 float: left; 17 width: 200px; 18 text-align: center; 19 } 20 .nav li a{ 21 text-decoration: none; 22 } 23 </style> 24 </head> 25 <body> 26 <button id="btn">无刷新请求</button> 27 <div class="nav"> 28 <ul id="navIn"> 29 30 </ul> 31 </div> 32 </body> 33 </html> 34 <script src="lib/jquery-1.12.2.js"></script> 35 <script> 36 37 /** 38 * $.ajax({}); 39 * url 服务器地址 40 * dataType: 41 * type: 请求类型 42 * success :function(){ 43 * 请求成功点后执行的函数 44 * } 45 * */ 46 $('#btn').click(function () { 47 $.ajax({ 48 url:'nav_json.php', 49 dataType:'json', 50 success:function (res) { 51 console.log(res); 52 var htmlStr = ''; 53 $.each(res,function (index,item) { 54 htmlStr += " <li>" + 55 "<a href="+item.link+">" + 56 "<img src="+item.src+" alt=''> " + 57 "<p>"+item.text+"</p>" + 58 "</a><" + 59 "/li>" 60 }); 61 $('.nav ul').html(htmlStr); 62 } 63 }); 64 }); 65 66 </script>
服务端:nav_json.php
1 <?php 2 /** 3 * Created by qinpeizhou. 4 * Date: 2017/11/10 5 * Time: 16:52 6 * Email : 1031219129@qq.com 7 */ 8 header('Content-Type:text/html;charset=utf-8;'); 9 $jsonStr = file_get_contents('nav.json'); 10 echo $jsonStr;
2.解析XML数据：
nav.xml
1 <?xml version="1.0" encoding="UTF-8" ?> 2 <array> 3 <item> 4 <link>http://www.jd.com</link> 5 <src>images/nav_1.png</src> 6 <text>京东超市</text> 7 </item> 8 <item> 9 <link>http://www.taobao.com</link> 10 <src>images/nav_2.png</src> 11 <text>全球购</text> 12 </item> 13 <item> 14 <link>http://www.mi.com</link> 15 <src>images/nav_3.png</src> 16 <text>服装城</text> 17 </item> 18 <item> 19 <link>http://www.163.com</link> 20 <src>images/nav_4.png</src> 21 <text>京东生鲜</text> 22 </item> 23 </array>
客户端：nav_XML.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav{ 13 border: 1px solid #ddd; 14 } 15 .nav li { 16 float: left; 17 width: 200px; 18 text-align: center; 19 } 20 .nav li a{ 21 text-decoration: none; 22 } 23 </style> 24 </head> 25 <body> 26 <button id="btn">无刷新请求</button> 27 <div class="nav"> 28 <ul id="navIn"> 29 30 </ul> 31 </div> 32 </body> 33 </html> 34 <script src="lib/jquery-1.12.2.js"></script> 35 <script> 36 37 /** 38 * $.ajax({}); 39 * url 服务器地址 40 * dataType: 41 * type: 请求类型 42 * success :function(){ 43 * 请求成功点后执行的函数 44 * } 45 * */ 46 $('#btn').click(function () { 47 $.ajax({ 48 url:'nav_XML.php', 49 dataType:'xml', 50 success:function (res) { 51 console.log(res); 52 var item = res.children[0].children; 53 var htmlStr = ''; 54 for (var i = 0; i < item.length; i++) { 55 htmlStr += '<li>\n' + 56 ' <a href="'+$(item[i]).find('link').text()+'">\n' + 57 ' <img src="'+$(item[i]).find('src').text()+'" alt="">\n' + 58 ' <p>'+$(item[i]).find('text').text()+'</p>\n' + 59 ' </a>\n' + 60 '</li>'; 61 } 62 $('.nav ul').html(htmlStr); 63 } 64 }); 65 }); 66 67 </script>
服务端：nav_XML.php
1 <?php 2 /** 3 * Created by qinpeizhou. 4 * Date: 2017/11/10 5 * Time: 16:52 6 * Email : 1031219129@qq.com 7 */ 8 header('Content-Type:text/html;charset=utf-8;'); 9 $jsonStr = file_get_contents('nav.xml'); 10 echo $jsonStr;
三.jQuery+Ajax 加载页面
1.加载没有js生成Dom元素节点的页面：
被加载页面 没带js加载数据的： HTML_page_nojs.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav { 13 border: 1px solid #ddd; 14 overflow: hidden; 15 } 16 .nav li{ 17 float: left; 18 width: 100px; 19 text-align: center; 20 } 21 .nav li a{ 22 text-decoration: none; 23 } 24 </style> 25 </head> 26 <body> 27 <button>无刷新请求</button> 28 <div class="nav"> 29 <ul> 30 <li> 31 <a href="chaoshi.html"> 32 <img src="images/nav_1.png" alt=""> 33 <p>京东超市</p> 34 </a> 35 </li> 36 <li> 37 <a href="chaoshi.html"> 38 <img src="images/nav_2.png" alt=""> 39 <p>京东超市</p> 40 </a> 41 </li> 42 <li> 43 <a href="chaoshi.html"> 44 <img src="images/nav_3.png" alt=""> 45 <p>京东超市</p> 46 </a> 47 </li> 48 <li> 49 <a href="chaoshi.html"> 50 <img src="images/nav_4.png" alt=""> 51 <p>京东超市</p> 52 </a> 53 </li> 54 </ul> 55 </div> 56 </body> 57 </html> 58 <script> 59 60 61 62 </script>
加载方式： load.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav{ 13 border: 1px solid #ddd; 14 } 15 .nav li { 16 float: left; 17 width: 200px; 18 text-align: center; 19 } 20 .nav li a{ 21 text-decoration: none; 22 } 23 </style> 24 </head> 25 <body> 26 <button id="btn">无刷新请求</button> 27 <div class="nav"> 28 29 </div> 30 </body> 31 </html> 32 <script src="lib/jquery-1.12.2.js"></script> 33 <script> 34 35 /** 36 * $.ajax({}); 37 * url 服务器地址 38 * dataType: 39 * type: 请求类型 40 * success :function(){ 41 * 请求成功点后执行的函数 42 * } 43 * */ 44 $('#btn').click(function () { 45 $('.nav').load('HTML_page_nojs.html .nav ul'); 46 // $(实例JQ对象).load('要加载的页面 页面的某个模块'); 47 }); 48 49 </script>
2.加载有js生成Dom元素节点的页面：
被加载的页面：HTML_page.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav{ 13 border: 1px solid #ddd; 14 } 15 .nav li { 16 float: left; 17 width: 200px; 18 text-align: center; 19 } 20 .nav li a{ 21 text-decoration: none; 22 } 23 </style> 24 </head> 25 <body> 26 <button id="btn">无刷新请求</button> 27 <div class="nav"> 28 <ul id="navIn"> 29 30 </ul> 31 </div> 32 </body> 33 </html> 34 <script src="lib/jquery-1.12.2.js"></script> 35 <script> 36 37 /** 38 * $.ajax({}); 39 * url 服务器地址 40 * dataType: 41 * type: 请求类型 42 * success :function(){ 43 * 请求成功点后执行的函数 44 * } 45 * */ 46 // $('#btn').click(function () { 47 $.ajax({ 48 url:'nav_json.php', 49 dataType:'json', 50 success:function (res) { 51 console.log(res); 52 var htmlStr = ''; 53 $.each(res,function (index,item) { 54 htmlStr += " <li>" + 55 "<a href="+item.link+">" + 56 "<img src="+item.src+" alt=''> " + 57 "<p>"+item.text+"</p>" + 58 "</a><" + 59 "/li>" 60 }); 61 $('.nav ul').html(htmlStr); 62 } 63 }); 64 // }); 65 66 </script>
load.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 } 12 .nav{ 13 border: 1px solid #ddd; 14 } 15 .nav li { 16 float: left; 17 width: 200px; 18 text-align: center; 19 } 20 .nav li a{ 21 text-decoration: none; 22 } 23 </style> 24 </head> 25 <body> 26 <button id="btn">无刷新请求</button> 27 <div class="nav"> 28 29 </div> 30 </body> 31 </html> 32 <script src="lib/jquery-1.12.2.js"></script> 33 <script> 34 35 /** 36 * $.ajax({}); 37 * url 服务器地址 38 * dataType: 39 * type: 请求类型 40 * success :function(){ 41 * 请求成功点后执行的函数 42 * } 43 * */ 44 $('#btn').click(function () { 45 // $('.nav').load('07_HTML_page.html'); 46 47 // $(实例JQ对象).load('要加载的页面'); 48 }); 49 50 </script>
