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í)行完成.
先介紹這三個,明天繼續(xù)介紹