jquery第十九課,在前一課學習了jquery的ajax參數的設置,本節(jié)直接通過實例來進行ajax的介紹,并分析ajax的參數設置等.
參考共用代碼:
<!doctype html public -//w3c//dtd html 4.0 transitional//en>
<html><head><title>jquery特效處理-前臺代碼</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測試 id=cn>
</body>
</html>
(1)用get的提交形式ajax實例分析
$.ajax({type:get,datatype:text,data:foraspcnurl=+$(#forasp).val(),url:index.php,success:function(msg){alert(msg);}
index.php代碼如下
<?echo $_get[foraspcnurl];?>
分析:提交方式type:get,數據類型data:text,數據foraspcnurl=id為forasp的text的值,發(fā)送請求地址url:index.php,成功返回success函數:function(msg){},msg為返回的數據
運行:在文本框填寫網站制作學習網,點擊按鈕彈出網站制作學習網
(2)用post提交形式提交ajax實例
$.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方式相似,多了個是否緩存catch:false,不緩存該頁面.加這個cache更明白cache用法.在請求的url代碼不一樣了由原來的$_get變成了$_post這事根據提交形式來定的.
(3)通過ajax看參數context(類型object),datatype(數據類型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(檢查數據,確實提交嗎?);}
});
運行試試,首先用beforesend,彈出檢查數據,確實提交嗎?,如果點擊確定返回true,則繼續(xù)ajax,如果不是,則停止執(zhí)行ajax,當確定后則執(zhí)行,首先彈出輸入的內容,然后彈出ajax執(zhí)行完成.