標籤：span blog bottom 提示 complete ide rsh javascrip 頁面
在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);
在jquery中使用AJAX
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
