jQuery之ajax實例

字號:


    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ù)介紹