$("#ACCOUNT_TYPE").bind('click', function() {
//alert( $(this).val());
var msg="";
if($(this).val()=="B134002")//託管
{
//msg="託管";
msg="ACCOUNT_TYPE_COM_T";
}
else if($(this).val()=="B134001")//存管
{
//msg="存管";
msg="ACCOUNT_TYPE_COM_C";
}
else if($(this).val()=="-")//存管和託管all
{
//msg="存管和託管";
msg="ACCOUNT_TYPE_COM_ALL";
}
else
{
alert("參數錯誤!");
return;
}
$("#ACCOUNT_TYPE_COMDiv_son").children().remove();//先清除全部子元素
$.ajax({
type:"post",
url:"${ctx}/Rule/Combination/getdict",
data:{type:msg},
dataType:"json",
success:function(json)
{
//$(object).children(selector).remove(); // 刪除object元素下知足selector選擇器的子元素,不填寫則默認刪除全部子元素
for(var i=0;i<json.length;i++)
{
var checkBox=document.createElement("input");
//checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("type","radio");
checkBox.setAttribute("id", json[i].value);
checkBox.setAttribute("value", json[i].value);
checkBox.setAttribute("name", "ACCOUNT_TYPE_COM");
checkBox.setAttribute("checked", true);
//checkBox.setAttribute("readonly", true);//
var li=document.createElement("span");
li.style.display = "block";
li.style.width = 23+"%";
li.style.float = "left";
li.appendChild(checkBox);
li.appendChild(document.createTextNode(json[i].label));
$("#ACCOUNT_TYPE_COMDiv_son").append(li);
}
}
,
beforeSend:function(mes)
{
alert("beforeSend");
},
complete:function()
{
alert("complete");
}
});
});
運行這段代碼,會先彈出 beforeSend 提示,而後加載success 方法裏面的代碼,最後彈出 complete 提示,這說明這段代碼的幾個方法的執行前後順序是符合上面總結的順序的!
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").ajaxStart(function(){
$(this).html("<img src='/i/demo_wait.gif' />");
alert("1.最早的全局方法");
});
$("button").click(function(){
$("div").load("/example/jquery/demo_ajax_load.asp");
});
$("div").ajaxSend(function()
{
alert("2.發送前");
});
$("div").ajaxSuccess(function()
{
alert("3.成功後");
});
$("div").ajaxComplete(function()
{
alert("4.ajaxComplete");
});
$("div").ajaxStop(function()
{
alert("5.ajaxStop");
});
});
</script>
</head>
<body>
<div id="txt"><h2>經過 AJAX 改變文本</h2></div>
<button>改變內容</button>
</body>
</html>
每次點擊 "改變內容" 的這個按鈕,都會先加載一次demo_wait.gif 這個圖片,而後執行 ajaxSend,而後執行 ajaxSuccess,而後執行ajaxComplete,而後執行 ajaxStop ,這個執行順序也是符合上面總結的順序的!
____________________________________________________________________________________
1、.ajaxStart()——ajax請求開始時觸發
描述:ajax請求開始時觸發 .ajaxStart()的回調函數,全局的,全部的ajax均可以用
寫法:元素.ajaxStart(function({ajax請求開始時觸發的代碼})
$("#loading").ajaxStart(function () {
$(this).show(); //ajax請求開始時#loading元素顯示
});
做用域:全局
某個ajax不受全局方法的影響:
方法:將$.ajax({})的global設爲false
$.ajax({
url: "test.html",
global:false
});
2、.ajaxStop()——ajax請求結束時觸發
描述:ajax請求結束時觸發 .ajaxStop()的回調函數,全局的,全部的ajax均可以用
寫法:元素.ajaxStop(function({ajax請求結束時觸發的代碼})
$("#loading").ajaxStop(function () {
$(this).hide(); //ajax請求結束時#loading元素隱藏
});
做用域:全局
某個ajax不受全局方法的影響:
方法:將$.ajax({})的global設爲false
$.ajax({
url: "test.html",
global:false
});
_______________________________________________________________________