2019-10-1 seo達(dá)人
“大名鼎鼎的”jQuery因?yàn)槠錁O簡的引用方式而在N年前備受追捧，而今“浪潮”過去，還剩下什么？
我認(rèn)識jQuery，只是在去年接觸ajax時(shí)了解，從而感興趣，進(jìn)而深入探究（其實(shí)也沒多深入，只是相關(guān)的看了一下）。不得不說，jQuery對ajax支持的四個(gè)type：post（一般用于發(fā)送）、get（一般常用于接收）、put（修改）、delete（刪除） 令我非常震撼，太**實(shí)用了。
這其中，post和get是最常用的（因?yàn)楹孟裾f不是所有的瀏覽器都支持put和delete），具體的我在 這篇文章 中以JS方式提到，這里不再贅述。
load()
load()方法時(shí)jQuery中操作上最為簡單的Ajax方法，能載入其他的HTML代碼并插入到DOM中。其基本格式為：
load(url [,data] [,callback])
1
參數(shù)意義：
url： String類型，請求HTML頁面的URL地址
data（可選）： Object類型，發(fā)送至服務(wù)器的key/value數(shù)據(jù)
callback（可選）： Function，請求完成時(shí)的回調(diào)函數(shù)，無論請求成功或失敗
為什么說它是“特別的”呢？因?yàn)樗挥糜谖臋n流（html）的操作，而且，既可以是get操作，又可以是post操作：
基本示例：
//如果是jsp代碼，這里要加一行：
// <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>請求的文件</title>
</head>
<body>
<div class="comment">
<h6>張三：</h6>
<p class="para">沙發(fā)</p>
</div>
<div class="comment">
<h6>李四：</h6>
<p class="para">板凳</p>
</div>
<div class="comment">
<h6>王五：</h6>
<p class="para">地板</p>
</div>
</body>
</html>
//如果是jsp代碼，這里要加一行：
//<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>發(fā)送ajax的文件</title>
<script src="js/jquery-2.1.0.js" type="text/javascript"></script>
//如果是jsp代碼，上面這一行要換成：<script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.jsp");
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax獲取">
<div class="comment">已有評論：</div>
<div id="resText"></div>
</body>
</html>
上面是“載入文檔”，它還可以“篩選載入的文檔”：
如果只需要加載某頁面內(nèi)的某些元素，那么可以使用load()方法的URL參數(shù)來達(dá)到目的。通過為 URL參數(shù) 指定選擇符，就可以很方便地從加載過來的HTML文檔里篩選出所需要的內(nèi)容。
load()方法的URL參數(shù)的語法結(jié)構(gòu)為：“url selector”。注意，URL和選擇器之間有一個(gè)空格：
$(function () {
$("#send").on("click", function () {
$("#resText").load("test.html .para");
});
});
傳遞方式：
load()方法的傳遞方式根據(jù) 參數(shù)data 來自動(dòng)指定。如果沒有參數(shù)傳遞，則采用GET方式傳遞；反之，則會(huì)自動(dòng)轉(zhuǎn)換為POST方式：
//無參數(shù)傳遞，GET方式
$("#resText").load("test.html .para", function(){
//....
});
//有參數(shù)傳遞，POST方式
$("#resText").load("test.html .para",{name:"tom", age:"18}, function(){
//....
});
回調(diào)函數(shù)：
對于必須在加載完成后才能繼續(xù)的操作，load()方法提供了 回調(diào)函數(shù) ，該函數(shù) 有3個(gè)參數(shù) ，分別代表請求返回的內(nèi)容、請求狀態(tài)和XMLHttpRequest對象 ，jQuery代碼如下：
$("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){
//responseText：請求返回的內(nèi)容——等同于js-ajax時(shí)的“得到服務(wù)器響應(yīng)的文本格式的內(nèi)容”（注意：js操作中的get、post...都在open()中規(guī)定）
//textStatus：請求狀態(tài)：success、error、notmodified、timeout4種
//XMLHttpRequest：XMLHttpRequest對象——這玩意一般用在判斷瀏覽器適用類型上
});
//注意：在load()方法中，無論Ajax請求是否成功，只要請求完成（complete）后，回調(diào)函數(shù)就被觸發(fā)。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com