在jquery中使用封装好的AJAX会对开发效率起到极大的便利，因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能；

1、在之前，我们首先需要详细了解AJAX异步请求接受的五中响应消息，根据不同的响应类型进行不同的操作

(1)text/plain    // 明文

服务器端：

header('Content-Type: text/plain');

echo 'succ';

客户端：

if(xhr.responseText==='succ'){ ... }

(2)text/html   //html 片段

服务器端：

header('Content-Type: text/html');

echo "<tr><td>$data</td></tr>";

客户端：

tbody.innerHTML = xhr.responseText

(3)application/javascript   //javascript代码片段

服务器端：

header('Content-Type: application/javascript');

echo "alert($data); f1(); f2($data)";

客户端：

eval( xhr.responseText )

(4)application/xml  //xml数据结构字符串

服务器端：

header('Content-Type: application/xml');

echo "<bookList><book>$b</book></bookList>";

客户端：

var document = xhr.responseXML

(5)application/json  //json 结构数据字符串

服务器端：

header('Content-Type: application/json');

//echo "[ {"bname":"","price":35.5},{} ]";

$list = ...;

echo json_encode($list);

客户端：

var obj = JSON.parse( xhr.responseText )

2 、 jquery 中总共封装了六个有关AJAX异步请求的函数 ：

　　(1)、对象方法  ---load()　　　

$('选择器').load(URL, [请求数据], [成功后的回调函数])

$('ul').load('search_suggest.php');

向指定的URL发起异步请求；若有请求数据，就是POST请求，否则就是GET请求；获取服务器端返回HTML片段响应，设置为当前选定元素的innerHTML。

　　

　　(2)、全局函数 ---$.get()

　　　　$.get(URL, [请求数据], 响应成功后的回调函数)

　　　　向指定的URL发起异步的GET请求，把请求数据追加在URL的后面；服务器给出了成功的响应会自动调用第三个参数——doResponse。

　　　 提示：$.get会根据服务器端返回的响应消息内容类型自动决定如何处理，如applicatoin/json，会自动调用JSON.parse(xhr.responseText)进行解析！

　　

　　(3)、全局函数---$.post()

　　　　$.post(URL, 请求数据, 响应成功后的回调函数)

　　　　基本上同$.get() 不同的是 请求类型为POST 而且会自动设置请求头的 content-type 为 application/x-www-form-urlencode;

　　

　　(4)、$.getScript()    向指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行eval( xhr.responseText )。

　　　　　　　　　　   要求服务器必须返回application/javascript！即使不是，也会强制调用eval(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用eval()

　　(5)、 $.getJSON()   指定的URL发起异步的GET请求，把请求数据放置在url后面；服务器给出了成功的响应会自动执行JSON.parse( xhr.responseText )。

　　　　　　　　　　   要求服务器必须返回application/json！即使不是，也会强制调用JSON.parse(xhr.responseText)进行执行！而$.get()可以实现同样的功能，却可以根据服务器端的响应头来决定是否调用JSON.parse()

　　上述五个函数的通病：只能处理成功的响应消息！如果服务器端返回了错误的响应消息（如404）上述五个函数不会有任何的提示——没有相关的回调函数！

　　(6)、$.ajax()    jquery中所有的异步请求都推荐使用 $.ajax()函数来完成

　　　 $.ajax()函数接收一个众多参数组成的对象，可以指定

　　　　　　成功的调用：  beforeSend()  =>  success()  => complete()

　　　　　　失败的调用：  beforeSend()  =>  error()  => complete()

　  　　$.ajax( {

　　 type: 'GET',   //POST/PUT/DELETE...

　　 url: 'x.php',

　　 data: 'k=v&k=v',  //{k:v, k:v}

　　beforeSend: fn,      //在请求发送前的回调

　　  success: fn,            //响应成功后的回调

　　  error: fn,               //响应失败后的回调

　　complete: fn          //响应完成后(不论成败)的回调

　　  } )

对应于原生AJAX：

　　var xhr = new XMLHttpRequest();

　　xhr.onreadystatechange = function(){

　　   if(xhr.readyState===4){

　　     if(xhr.status===200){

　　            success();

　　        }else {

　　            error();

　　      }

　　     complete()

　　    }

　　}

　　xhr.open()

　　beforeSend();

　　xhr.send()

上面仅仅列举了$.ajax()方法的几个常用的参数，还有更多的参数请查看手册

案例演示 jquery中的$.ajax方法使用

实现效果如下图：

(1)、实现 li 的 onmouserover 事件 请求该类别下的所有车辆信息

(2)、实现 列表下的div 的 click 事件 请求车辆详细信息

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>...</title>
  6.   <style>
  7. 	*{
  8. 		padding:0;
  9. 		margin:0;
  10. 	}
  11. 	.container{
  12. 		width:900px;
  13. 	}
  14. 	.container ul{
  15. 		overflow:hidden;
  16. 		list-style:none;
  17. 		width:100%
  18. 	}
  19. 	.container ul li{
  20. 		text-align:center;
  21. 		border-bottom: 1px solid #eee;
  22. 		float:left;
  23. 		line-height:30px;
  24. 		width:185px;
  25. 		padding:0 20px;
  26. 	}
  27. 	.container ul li:hover{
  28. 		border-bottom:1px solid red;
  29. 	}
  30. 	#carList {
  31. 		width:100%
  32. 		overflow:hidden;
  33. 		height:325px;
  34. 	}
  35. 	#carList div {
  36. 		float:left;
  37. 		padding-top:25px;
  38. 		width:300px;
  39. 	}
  40. 	#carList>div:hover{
  41. 		cursor:pointer;
  42. 	}
  43. 	#carList div b {
  44. 		padding-left:20px;
  45. 	}
  46. 	#carList div p{
  47. 		line-height:35px;
  48. 		padding-left:20px;
  49. 	}
  50. 	#carList div p span {
  51. 		color:red;
  52. 	}
  53. 	#carShow{
  54. 		margin-top:85px;
  55. 		overflow:hidden;
  56. 	}
  57. 	#carShow img{
  58. 		float:left;
  59. 	}
  60. 	#carShow>div{
  61. 		float:left;
  62. 		padding-left:175px;
  63. 	}
  64. 	#carShow p{
  65. 		font-size:1.5em;
  66. 		line-height:35px;
  67. 	}
  68. 	#carShow p span{
  69. 		color:red;
  70. 	}
  71. 	#carShow.hide{
  72. 		display:none;
  73. 	}
  74.   </style>
  75.  </head>
  76.  <body>
  77.   <h1>车辆查询系统</h1>
  78.   <hr>
  79.   <div class="container">
  80. 		<ul id="uList">
  81. 			<li data-value="LT8">8万以下</li>
  82. 			<li data-value="LT15">8-15万</li>
  83. 			<li data-value="LT30">15-30万</li>
  84. 			<li data-value="SUV">SUV</li>
  85. 		</ul>
  86. 		<div id="carList">
  87. 		</div>
  88. 		<div id="carShow" class="hide">
  89.  
  90. 		</div>
  91.   </div>
  92.   <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
  93.   <script type="text/javascript">
  94. 		$("#uList").on("mouseover","li",function(e){
  95. 				var $v = $(this).attr("data-value");
  96. 				//console.log($v);
  97. 				$.ajax({
  98. 					url:"car_list.php",
  99. 					data:{"type":$v},
  100. 					success:function(obj){
  101. 						html="";
  102. 						for(var i =0; i<obj.length;i++){
  103. 							var c = obj[i];
  104. 							html+=`<div data-select='${c.cid}'>
  105. 											<b>${c.cname}</b>
  106. 											<p>有
  107. 												<span>${c.count}</span>
  108. 												正在购买
  109. 											</p>
  110. 											<img src='${c.pic}'></img>
  111. 										</div>`;
  112. 						}
  113. 						$("#carList").html(html);
  114. 					}
  115. 				});
  116. 		})
  117. 		$("#carList").on("click","div",function(){
  118. 			var $v = $(this).attr("data-select");
  119. 			console.log($v);
  120. 			$.ajax({
  121. 				url:"car_select.php",
  122. 				data:{"cid":$v},
  123. 				success:function(obj){
  124. 					$("#carShow").removeClass("hide").html(
  125. 					`<img src='${obj.pic}' alt="">
  126. 					<div>
  127. 						<p>汽车编号：${obj.cid}</p>
  128. 						<p>
  129. 							<b>${obj.cname}</b>
  130. 						</p>
  131. 						<p>
  132. 							<span>￥${obj.price}</span>
  133. 						</p>
  134. 						<p>有
  135. 							<span>${obj.count}</span>
  136. 						人正在购买</p>
  137. 					</div>`);
  138. 				}
  139. 			});
  140. 		})
  141.   </script>
  142.  </body>
  143. </html>

　　

(3)、响应页面以php为例  -------数据传输格式为JSON

  1. <?php   //init 文件
  2. $conn = mysqli_connect('127.0.0.1','root','','huimaiche',3306);
  3. $sql = 'SET NAMES UTF8';
  4. mysqli_query($conn,$sql);

　　

  1. <?php    // li onmouserover 事件的响应
  2. header('Content-Type:application/json;charset=UTF-8');
  3. @$tid  = $_REQUEST['type'] or die('{"msg":"type required"}');
  4. require('car_init.php');
  5. $sql = "SELECT * FROM car WHERE type='$tid'";
  6. $result = mysqli_query($conn,$sql);
  7. $list = mysqli_fetch_all($result,MYSQLI_ASSOC);
  8. echo json_encode($list);

　　

  1. <?php  // div click事件 的响应
  2. header('Content-Type:application/json;charset=UTF-8');
  3. @$cid  = $_REQUEST['cid'] or die('{"msg":"cid required"}');
  4. require('car_init.php');
  5. $sql = "SELECT * FROM car WHERE cid='$cid'";
  6. $result = mysqli_query($conn,$sql);
  7. $row = mysqli_fetch_assoc($result);
  8. //var_dump($row);
  9. echo json_encode($row);

　　

在jquery中使用AJAX的更多相关文章

  1. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

  2. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  4. jquery中的ajax参数

    jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...

  5. 用JQuery中的Ajax方法获取web service等后台程序中的方法

    用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...

  6. jQuery中操作Ajax方法小结

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...

  7. $.ajax()方法详解 jquery中的ajax方法

    jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...

  8. 深入理解ajax系列第九篇——jQuery中的ajax

    前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...

  9. 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

    一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...

  10. jQuery中的$.ajax()方法

    jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...

随机推荐

  1. Yii2使用Redis - 从安装redis到使用 [ 2.0 版本 ]

    Yii2使用Redis - 从安装redis到使用 [ 2.0 版本 ] 一.安装Redis和简单配置 1. 下载Redis安装包 地址:http://redis.io/download , 本文选择 ...

  2. PS 滤镜— —图像偏移

    clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Processing\PS Algorithm'); I=imread ...

  3. Unity-2017.3官方实例教程Space-Shooter（二）

    由于初学Unity,写下此文作为笔记,文中难免会有疏漏,不当之处还望指正. Unity-2017.3官方实例教程Space-Shooter(一) 章节列表: 一.创建小行星Prefab 二.创建敌机和 ...

  4. CodeForces - 613D：Kingdom and its Cities（虚树+DP）

    Meanwhile, the kingdom of K is getting ready for the marriage of the King's daughter. However, in or ...

  5. MYSQL_与excel结合在excel中用&连接符快速创建表头_20161125

    excel &连接符快速创建表头 复制c列内容 CREATE TABLE A0001restaurant ( #用户明细表 城市 ), 区块 ), 用户ID ), 用户名称 ), 用户地址 ) ...

  6. MySQL条件判断处理函数_20160925

    MySQL条件判断处理 一.假如我想把salesperson 分成 5组,计算每个销售分组的业绩 首先先将销售分组 SELECT *, CASE WHEN salesperson IN (" ...

  7. 【LeetCode】040. Combination Sum II

    题目: Given a collection of candidate numbers (C) and a target number (T), find all unique combination ...

  8. CRC16算法之二：CRC16-CCITT-XMODEM算法的java实现

    CRC16算法系列文章: CRC16算法之一:CRC16-CCITT-FALSE算法的java实现 CRC16算法之二:CRC16-CCITT-XMODEM算法的java实现 CRC16算法之三:CR ...

  9. SimpliciTI协议地址分配

    1.多个ED节点和AP正确连接后,AP都会给ED分配一个相应的地址.当某个ED出现意外,比如电源问题,和AP断开连接,AP并不将该ED节点的地址消除.当该ED恢复正常,重新申请加入网络时,AP会检测该 ...

  10. Modbus通讯协议学习 - 认识篇

    转自:http://www.cnblogs.com/luomingui/archive/2013/06/14/Modbus.html 什么是Modbus? Modbus 协议是应用于电子控制器上的一种 ...