jquery第十九課,在前一課學(xué)習(xí)了jQuery的ajax參數(shù)的設(shè)置,本節(jié)直接通過(guò)實(shí)例來(lái)進(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)行:在文本框填寫(xiě)"網(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,不緩存該頁(yè)面.加這個(gè)cache更明白cache用法.在請(qǐng)求的url代碼不一樣了由原來(lái)的$_GET變成了$_POST這事根據(jù)提交形式來(lái)定的.
(3)通過(guò)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í)行完成.
先介紹這三個(gè),明天繼續(xù)介紹