jQuery 實現Ajax應用
使用load()方法非同步請求資料
使用load()方法通過Ajax請求載入伺服器中的資料，並把返回的資料放置到指定的元素中，它的呼叫格式為：
load(url,[data],[callback])
引數url為載入伺服器地址，可選項data引數為請求時傳送的資料，callback引數為資料請求成功後，執行的回撥函式
使用getJSON()方法非同步載入JSON格式資料
使用getJSON()方法可以通過Ajax非同步請求的方式，獲取伺服器中的資料，並對獲取的資料進行解析，顯示在頁面中，它的呼叫格式為：
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
其中，url引數為請求載入json格式檔案的伺服器地址，可選項data引數為請求時傳送的資料，callback引數為資料請求成功後，執行的回撥函式
使用getScript()方法非同步載入並執行js檔案
使用getScript()方法非同步請求並執行伺服器中的JavaScript格式的檔案，它的呼叫格式如下所示：
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
引數url為伺服器請求地址，可選項callback引數為請求成功後執行的回撥函式
使用get()方法以GET方式從伺服器獲取資料
使用get()方法時，採用GET方式向伺服器請求資料，並通過方法中回撥函式的引數返回請求的資料，它的呼叫格式如下：
$.get(url,[callback])
引數url為伺服器請求地址，可選項callback引數為請求成功後執行的回撥函式
使用post()方法以POST方式從伺服器傳送資料
post()方法用於以POST方式向伺服器傳送資料，伺服器接收到資料之後，進行處理，並將處理結果返回頁面，呼叫格式如下：
$.post(url,[data],[callback])
引數url為伺服器請求地址，可選項data為向伺服器請求時傳送的資料，可選項callback引數為請求成功後執行的回撥函式
使用serialize()方法序列化表單元素值
使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文字字串，直接可用於ajax請求，它的呼叫格式如下：
$(selector).serialize()
其中selector引數是一個或多個表單中的元素或表單元素本身
使用ajax()方法載入伺服器資料
使用ajax()方法是最底層、功能最強大的請求伺服器資料的方法，它不僅可以獲取伺服器返回的資料，還能向伺服器傳送請求並傳遞數值，它的呼叫格式如下：
jQuery.ajax([settings])或$.ajax([settings])
其中引數settings為傳送ajax請求時的配置物件，在該物件中，url表示伺服器請求的路徑，data為請求時傳遞的資料，dataType為伺服器返回的資料型別，success為請求成功的執行的回撥函式，type為傳送資料請求的方式，預設為get
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用ajax()方法載入伺服器資料</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">檢測數字的奇偶性</span>
<span class="fr">
<input id="btnCheck" type="button" value="檢測" />
</span>
</div>
<ul>
<li>請求輸入一個數字
<input id="txtNumber" type="text" size="12" />
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnCheck").bind("click", function () {
$.ajax({
url: "http://www.imooc.com/data/check.php",
data: { num: $("#txtNumber").val() },
type: `POST`,
success: function (data) {
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
})
});
</script>
</body>
</html>
使用ajaxSetup()方法設定全域性Ajax預設選項
使用ajaxSetup()方法可以設定Ajax請求的一些全域性性選項值，設定完成後，後面的Ajax請求將不需要再新增這些選項值，它的呼叫格式為：
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可選項options引數為一個物件，通過該物件設定Ajax請求時的全域性選項值
<script type="text/javascript">
$(function () {
$.ajaxSetup({
type:"post",
dataType:"text",
success:function(data){
$("ul").append("<li>你輸入的<b> "
+ $("#txtNumber").val() + " </b>是<b> "
+ data + " </b></li>");
}
});
$("#btnShow_1").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check.php"
});
})
$("#btnShow_2").bind("click", function () {
$.ajax({
data: { num: $("#txtNumber").val() },
url: "http://www.imooc.com/data/check_f.php"
});
})
});
</script>
使用ajaxStart()和ajaxStop()方法
ajaxStart()和ajaxStop()方法是繫結Ajax事件。ajaxStart()方法用於在Ajax請求發出前觸發函式，ajaxStop()方法用於在Ajax請求完成後觸發函式。它們的呼叫格式為：
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中，兩個方法中括號都是繫結的函式，當傳送Ajax請求前執行ajaxStart()方法繫結的函式，請求成功後，執行ajaxStop ()方法繫結的函式
jQuery 常用外掛
表單驗證外掛——validate
該外掛自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常資訊，此外，還允許自定義驗證規則，外掛呼叫方法如下：
$(form).validate({options})
其中form參數列示表單元素名稱，options參數列示呼叫方法時的配置物件，所有的驗證規則和異常資訊顯示的位置都在該物件中進行設定
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/*自定義驗證規則*/
rules: {
email: {
required: true,
email: true
}
},
/*錯誤提示位置*/
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
表單外掛——form
通過表單form外掛，呼叫ajaxForm()方法，實現ajax方式向伺服器提交表單資料，並通過方法中的options物件獲取伺服器返回資料，呼叫格式如下：
$(form). ajaxForm ({options})
其中form參數列示表單元素名稱；options是一個配置物件，用於在傳送ajax請求過程，設定傳送時的資料和引數
<script type="text/javascript">
$(function () {
var options = {
url: "http://www.imooc.com/data/form_f.php",
target: ".tip"
}
$(#frmV).ajaxForm(options);
});
</script>
圖片燈箱外掛——lightBox
該外掛可以用圓角的方式展示選擇中的圖片，使用按鈕檢視上下張圖片，在載入圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，呼叫格式如下：
$(linkimage).lightBox({options})
其中linkimage引數為包含圖片的<a>元素名稱，options為外掛方法的配置物件
圖片放大鏡外掛——jqzoom
在呼叫jqzoom圖片放大鏡外掛時，需要準備一大一小兩張一樣的圖片，在頁面中顯示小圖片，當滑鼠在小圖片中移動時，呼叫該外掛的jqzoom()方法，顯示與小圖片相同的大圖片區域，從而實現放大鏡的效果，呼叫格式如下：
$(linkimage).jqzoom({options})
其中linkimage引數為包含圖片的<a>元素名稱，options為外掛方法的配置物件
<script type="text/javascript">
$(function () {
$("#jqzoom").jqzoom({ //繫結圖片放大外掛jqzoom
zoomWidth: 123, //小圖片所選區域的寬
zoomHeight: 123, //小圖片所選區域的高
zoomType: `reverse` //設定放大鏡的型別
});
});
</script>
cookie外掛——cookie
使用cookie外掛後，可以很方便地通過cookie物件儲存、讀取、刪除使用者的資訊，還能通過cookie外掛儲存使用者的瀏覽記錄，它的呼叫格式為：
儲存：$.cookie(key，value)；讀取：$.cookie(key)，刪除：$.cookie(key，null)
其中引數key為儲存cookie物件的名稱，value為名稱對應的cookie值
<script type="text/javascript">
$(function () {
if ($.cookie("email")) {
$("#email").val($.cookie("email"));
}
$("#btnSet").bind("click", function () {
if ($("#chksave").is(":checked")) {
$.cookie("email", $("email").val(), {
path: "/", expires: 7
})
}
else {
$.cookie("email", null, {
path: "/"
})
}
});
});
</script>
搜尋外掛——autocomplete
搜尋外掛的功能是通過外掛的autocomplete()方法與文字框相繫結，當文字框輸入字元時，繫結後的外掛將返回與字元相近的字串提示選擇，呼叫格式如下：
$(textbox).autocomplete(urlData,[options]);
其中，textbox引數為文字框元素名稱，urlData為外掛返回的相近字串資料，可選項引數options為呼叫外掛方法時的配置物件
<body>
<div id="divtest">
<div class="title">
<span class="fl">搜尋外掛</span>
</div>
<div class="content">
<span class="fl">使用者名稱</span><br />
<input id="txtSearch" name="txtSearch" type="text" />
<div class="tip">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var arrUserName = ["王五", "劉明", "李小四", "劉促明", "李淵", "張小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName, {
minChars: 0, //雙擊空白文字框時顯示全部提示資料
formatItem: function (data, i, total) {
return "<I>" + data[0] + "</I>"; //改變匹配資料顯示的格式
},
formatMatch: function (data, i, total) {
return data[0];
},
formatResult: function (data) {
return data[0];
}
}).result(SearchCallback);
function SearchCallback(event, data, formatted) {
$(".tip").show().html("您的選擇是：" + (!data ? "空" : formatted));
}
});
</script>
</body>
右鍵選單外掛——contextmenu
右鍵選單外掛可以繫結頁面中的任意元素，繫結後，選中元素，點選右鍵，便通過該外掛彈出一個快捷選單，點選選單各項名稱執行相應操作，呼叫程式碼如下：
$(selector).contextMenu(menuId,{options});
Selector引數為繫結外掛的元素，meunId為快捷選單元素，options為配置物件
<body>
<div id="divtest">
<div class="title"><span class="fl">點選右鍵</span></div>
<div class="content">
<input id="btnSubmit" type="button" value="提交" />
<div class="tip"></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />儲存</li>
<li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#divtest").contextMenu(`sysMenu`,
{ bindings:
{
`Li3`: function (Item) {
$(".tip").show().html("您點選了“儲存”項");
},
`Li4`: function (Item) {
$(".tip").show().html("您點選了“退出”項");
}
}
});
});
</script>
</body>
自定義物件級外掛——lifocuscolor外掛
自定義的lifocuscolor外掛可以在<ul>元素中，滑鼠在表項<li>元素移動時，自定義其獲取焦點時的背景色，即定義<li>元素選中時的背景色，呼叫格式為：
$(Id).focusColor(color)
其中，引數Id表示<ul>元素的Id號，color表示<li>元素選中時的背景色
<body>
<div id="divtest">
<div class="title">
<span class="fl">物件級別的外掛</span>
</div>
<div class="content">
<ul id="u1">
<li><span>橘子</span><span>水果</span></li>
<li><span>芹菜</span><span>蔬菜</span></li>
<li><span>香蕉</span><span>水果</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#u1").focusColor("#888"); //呼叫自定義的外掛
})
</script>
</body>
自定義類級別外掛—— twoaddresult
通過呼叫自定義外掛twoaddresult中的不同方法，可以實現對兩個數值進行相加和相減的運算，匯入外掛後，呼叫格式分別為：
$.addNum(p1,p2) 和 $.subNum(p1,p2)
上述呼叫格式分別為計算兩數值相加和相減的結果，p1和p2為任意數值
<body>
<div id="divtest">
<div class="title">
<span class="fl">自定義類級別外掛</span>
<span class="fr">
<input id="btnCount" type="button" value="計算" />
</span>
</div>
<div class="content">
兩數相減：
<input id="Text1" type="text" class="txt" />
-
<input id="Text2" type="text" class="txt" />
=
<input id="Text3" type="text" class="txt" />
</div>
</div>
<script type="text/javascript">
$(function () {
$("#btnCount").bind("click", function () {
$("#Text3").val(
$.subNum($("#Text1").val(),
$("#Text2").val())
);
});
});
</script>
</body>