在jquery中使用AJAX

在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}‘ >
					<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);

　　

时间： 2024-09-29 00:29:25

在jquery中使用AJAX的相关文章

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

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

前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而不需要理会那么繁琐的XMLHTTPRequest对象.jQuery对ajax操作进行了封装,在jQuery中$.ajax()属性最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法.下面将详细介绍jQuery中的aj

jquery中的ajax参数

jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参数记住: 1.url    strng   发送请求的地址 2.type  string   请求方式(post或get,默认get),其他http请求方法,比如:put和delete也可以使用,但只有部分浏览器支持. 3.timeout   number    设置请求超时时间(毫秒).此设置将覆

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

一.JQuery与AngularJS 首先,先简单的比较一下JQuery与AngularJS. 二.Ajax请求与数据遍历打印 这里是Ajax和$http请求的JSON文件概览,默认的路径我们就放在与两者同级的文件夹里. [ { "name": "一号", "age": 17, "hobby": [ "吃", "喝" ], "score":{ "math&q

分析一下jquery中的ajax操作

在web前端开发中,ajax是很重要的一项技术,用原生写起来很是麻烦,需要一大堆js代码,而到了jq里就被精简了许多,一起来看看: jquery中的ajax分为三种方式: 1.$.get(),get方式获取 例子: $('.btn').click({ $.get('1.txt',function(data){ //'1.txt'为服务器上的文档,data为获取到的数据 alert(data); }); }) 2.$.post(),post方式获取 例子: $('.btn').click({ $.

从零开始学习jQuery (六) jquery中的AJAX使用

本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式. 二.前言 Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个

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

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax应用 一.原始Ajax与jQuery中的Ajax 首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

jQuery中的Ajax几种请求方式

1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (Map) : (可选参数) 发送至服务器的 key/value 数据. callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数. 这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的.jQuery

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

jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async: 要求为Boolean类型的参数,默