jquery第十九課,在前一課學(xué)習(xí)了jquery的ajax參數(shù)的設(shè)置,本節(jié)直接通過實(shí)例來進(jìn)行ajax的介紹,并分析ajax的參數(shù)設(shè)置等.
參考共用代碼:
<!doctype html public -//w3c//dtd html 4.0 transitional//en>
<html><head><title>jquery特效處理-前臺(tái)代碼</title>
<script language=javascript src=jquery-1.4.2.min.js></script>
<script language=javascript>
$(function(){//<!--www.forasp.cn jquery代碼區(qū)-->
$(#cn).bind(click,function(){//綁定后面的按鈕click事件
//ajax代碼區(qū)
});});
</script>
<body>
<input type=text maxlength=20 id=forasp> <input type=button value=jquery的ajax測(cè)試 id=cn>
</body>
</html>
(1)用get的提交形式ajax實(shí)例分析
$.ajax({type:get,datatype:text,data:foraspcnurl=+$(#forasp).val(),url:index.php,success:function(msg){alert(msg);}
index.php代碼如下
<?echo $_get[foraspcnurl];?>
分析:提交方式type:get,數(shù)據(jù)類型data:text,數(shù)據(jù)foraspcnurl=id為forasp的text的值,發(fā)送請(qǐng)求地址url:index.php,成功返回success函數(shù):function(msg){},msg為返回的數(shù)據(jù)
運(yùn)行:在文本框填寫網(wǎng)站制作學(xué)習(xí)網(wǎng),點(diǎn)擊按鈕彈出網(wǎng)站制作學(xué)習(xí)網(wǎng)
(2)用post提交形式提交ajax實(shí)例
$.ajax({type:post,catch:false,datatype:text,data:foraspcnurl=+$(#forasp).val(),url:index4.php,success:function(msg){alert(msg);}
index.php代碼如下
<?echo $_post[foraspcnurl];?>
分析:基本跟get方式相似,多了個(gè)是否緩存catch:false,不緩存該頁面.加這個(gè)cache更明白cache用法.在請(qǐng)求的url代碼不一樣了由原來的$_get變成了$_post這事根據(jù)提交形式來定的.
(3)通過ajax看參數(shù)context(類型object),datatype(數(shù)據(jù)類型string),beforesend的使用
$.ajax({
type:post,
cache:false,datatype:text,
data:foraspcnurl=+$(#forasp).val(),
url:index4.php,
success:function(msg){alert(msg);},
complete:function(){alert(完成ajax事件)},
beforesend:function(){return confirm(檢查數(shù)據(jù),確實(shí)提交嗎?);}
});
運(yùn)行試試,首先用beforesend,彈出檢查數(shù)據(jù),確實(shí)提交嗎?,如果點(diǎn)擊確定返回true,則繼續(xù)ajax,如果不是,則停止執(zhí)行ajax,當(dāng)確定后則執(zhí)行,首先彈出輸入的內(nèi)容,然后彈出ajax執(zhí)行完成.