在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}' 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的更多相关文章
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- 用JQuery中的Ajax方法获取web service等后台程序中的方法
用JQuery中的Ajax方法获取web service等后台程序中的方法 1.准备需要被前台html页面调用的web Service,这里我们就用ws来代替了,代码如下: using System; ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- $.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- 深入理解ajax系列第九篇——jQuery中的ajax
前面的话 jQuery提供了一些日常开发中需要的快捷操作,例如load.ajax.get和post等,使用jQuery开发ajax将变得极其简单.这样开发人员就可以将程序开发集中在业务和用户体验上,而 ...
- 两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http
一.JQuery与AngularJS 首先,先简单的了解一下JQuery与AngularJS.从源头上来说,两者都属于原生JS所封装成的库,两种为平行关系. 二.Ajax请求与数据遍历打印 这里是Aj ...
- jQuery中的$.ajax()方法
jQuery中的$.ajax()方法 $.ajax({ type:"POST", url:"../page/user.action?userId=" + use ...
随机推荐
- Linux-Yum服务器搭建
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...
- 分享知识-快乐自己：自定义struts2类型转换的全局与局部错误信息。
遇到类型转换错误的时候(也就是说不能进行类型转换),struts2框架自动生成一条错误信息,并且将该错误信息放到addFieldError里面.我们可以通过配置文件来替换这条由struts2自动生成的 ...
- hdu-5656 CA Loves GCD(dp+数论)
题目链接: CA Loves GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Ot ...
- javaScript的类型转换
1.javaScript会自动跟据期望将值进行转换,比如 2.下面表列出了一些javaScript的自动转换,其中粗体字表示了出乎意料的转换情况 3.显示的类型转换 尽管类型可以自动进行一些转换,但是 ...
- homebrew cask安装launch rocket【转】
简介 brew cask是一个用命令行管理Mac下应用的工具,它是基于homebrew的一个增强工具. homebrew可以管理Mac下的命令行工具,例如imagemagick, nodejs,如下所 ...
- ACM学习历程——POJ3321 Apple Tree（搜索，线段树）
Description There is an apple tree outside of kaka's house. Every autumn, a lot of apples will ...
- Codeforces round 396(Div. 2) 题解
Problem A 题目大意 给定两个字符串,要求构造出一个最长的一个串满足:这个串是其中一个串的字序列并且不是另一个串的子序列.输出长度.\((len \leq 10^5)\) 题解 千万年死在读题 ...
- Tensorflow知识点学习
1.TensorFlow中Tensor维度理解: (1)对于2维Tensor 0维对应列 1维对应行 (2)维度操作举例: 对于k维的,tf.reduce_sum(x, axis=k-1)的结果是对最 ...
- 【转】Pro Android学习笔记（九）：了解Content Provider（下下）
Content provider作为信息的读出,比较常见的还有文件的读写,最基础的就是二进制文件的的读写,例如img文件,音频文件的读写.在数据库中存放了该文件的路径,我们可以通过ContentPro ...
- IoT：template
ylbtech-IoT: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech.cnb ...