jQuery之a(chǎn)jax實(shí)例

字號(hào):


    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,不緩存該頁(yè)面.加這個(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í)行完成.
    先介紹這三個(gè),明天繼續(xù)介紹