在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 事件 请求车辆详细信息

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>...</title>

  <style>

	*{

		padding:0;

		margin:0;

	}

	.container{

		width:900px;

	}

	.container ul{

		overflow:hidden;

		list-style:none;

		width:100%

	}

	.container ul li{

		text-align:center;

		border-bottom: 1px solid #eee;

		float:left;

		line-height:30px;

		width:185px;

		padding:0 20px;

	}

	.container ul li:hover{

		border-bottom:1px solid red;

	}

	#carList {

		width:100%

		overflow:hidden;

		height:325px;

	}

	#carList div {

		float:left;

		padding-top:25px;

		width:300px;

	}

	#carList>div:hover{

		cursor:pointer;

	}

	#carList div b {

		padding-left:20px;

	}

	#carList div p{

		line-height:35px;

		padding-left:20px;

	}

	#carList div p span {

		color:red;

	}

	#carShow{

		margin-top:85px;

		overflow:hidden;

	}

	#carShow img{

		float:left;

	}

	#carShow>div{

		float:left;

		padding-left:175px;

	}

	#carShow p{

		font-size:1.5em;

		line-height:35px;

	}

	#carShow p span{

		color:red;

	}

	#carShow.hide{

		display:none;

	}

  </style>

 </head>

 <body>

  <h1>车辆查询系统</h1>

  <hr>

  <div class="container">

		<ul id="uList">

			<li data-value="LT8">8万以下</li>

			<li data-value="LT15">8-15万</li>

			<li data-value="LT30">15-30万</li>

			<li data-value="SUV">SUV</li>

		</ul>

		<div id="carList">

		</div>

		<div id="carShow" class="hide">

		</div>

  </div>

  <script type="text/javascript" src="js/jquery-1.11.3.js"></script>

  <script type="text/javascript">

		$("#uList").on("mouseover","li",function(e){

				var $v = $(this).attr("data-value");

				//console.log($v);

				$.ajax({

					url:"car_list.php",

					data:{"type":$v},

					success:function(obj){

						html="";

						for(var i =0; i<obj.length;i++){

							var c = obj[i];

							html+=`<div data-select='${c.cid}'>

											<b>${c.cname}</b>

											<p>有

												<span>${c.count}</span>

												正在购买

											</p>

											<img src='${c.pic}'></img>

										</div>`;

						}

						$("#carList").html(html);

					}

				});

		})

		$("#carList").on("click","div",function(){

			var $v = $(this).attr("data-select");

			console.log($v);

			$.ajax({

				url:"car_select.php",

				data:{"cid":$v},

				success:function(obj){

					$("#carShow").removeClass("hide").html(

					`<img src='${obj.pic}' alt="">

					<div>

						<p>汽车编号：${obj.cid}</p>

						<p>

							<b>${obj.cname}</b>

						</p>

						<p>

							<span>￥${obj.price}</span>

						</p>

						<p>有

							<span>${obj.count}</span>

						人正在购买</p>

					</div>`);

				}

			});

		})

  </script>

 </body>

</html>

　　

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

<?php   //init 文件

$conn = mysqli_connect('127.0.0.1','root','','huimaiche',3306);

$sql = 'SET NAMES UTF8';

mysqli_query($conn,$sql);

　　

<?php    // li onmouserover 事件的响应

header('Content-Type:application/json;charset=UTF-8');

@$tid  = $_REQUEST['type'] or die('{"msg":"type required"}');

require('car_init.php');

$sql = "SELECT * FROM car WHERE type='$tid'";

$result = mysqli_query($conn,$sql);

$list = mysqli_fetch_all($result,MYSQLI_ASSOC);

echo json_encode($list);

　　

<?php  // div click事件 的响应

header('Content-Type:application/json;charset=UTF-8');

@$cid  = $_REQUEST['cid'] or die('{"msg":"cid required"}');

require('car_init.php');

$sql = "SELECT * FROM car WHERE cid='$cid'";

$result = mysqli_query($conn,$sql);

$row = mysqli_fetch_assoc($result);

//var_dump($row);

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. c语言学习的第12天

    #include <stdio.h> int main(void) { int *p; int i=5; char ch='A'; p=&i; *p=99; printf(&quo ...

  2. ubuntu上swift开发学习2

    使用包管理器(package manager)创建一个可执行的项目 1. 创建一个Hello目录,然后进入目录 $ mkdir Hello $ cd Hello 2. 使用包初始化命令,参数表示创建一 ...

  3. 创建blog APP

    声明:此Django分类下的教程是追梦人物所有,地址http://www.jianshu.com/u/f0c09f959299,本人写在此只是为了巩固复习使用 什么是APP呢,Django里的APP其 ...

  4. 总结近期CNN模型的发展(一)---- ResNet [1, 2] Wide ResNet [3] ResNeXt [4] DenseNet [5] DPNet [9] NASNet [10] SENet [11] Capsules [12]

    总结近期CNN模型的发展(一) from:https://zhuanlan.zhihu.com/p/30746099 余俊 计算机视觉及深度学习   1.前言 好久没有更新专栏了,最近因为项目的原因接 ...

  5. LinkedList_1.打印两个有序链表的公共部分

    思路: 实例化出两个链表($link_a, $link_b),比较连个链表当前元素的大小,谁小谁执行next()方法继续比较,当出现相当的时候把相等的值塞入数组$common里,当两个链表有一个元素比 ...

  6. codeforces 659E E. New Reform(图论)

    题目链接: E. New Reform time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. 机器学习： Logistic Regression--python

    今天介绍 logistic regression,虽然里面有 regression 这个词,但是这其实是一种分类的方法,这个分类方法输出的也是 0-1 之间的一个数,可以看成是一种概率输出,这个分类器 ...

  8. Ubuntu16.04上安装arm-linux-gcc4.4.3

    一.首先下载arm-linux-gcc-4.4.3.tar.gz安装包,安装包地址: http://www.cr173.com/soft/42654.html 二.解压安装包: sudo tar -z ...

  9. 如何在asterisk中限制呼叫路数

      在asterisk中,对于呼叫个数是可以通过call-limit进行限制的.限制办法是通过修改asterisk.conf中maxcalls参数,设置允许的最大呼叫数.这里的最大呼叫数是包括所有的呼 ...

  10. 如何解决outlook2013邮件规则for other machine的失效问题

    如何解决outlook2013邮件规则for other machine的失效问题 问题描述:因为重装系统,outlook2013进去后->Rules and Alerts->发现所有原来 ...