課件_53.第九章：Ajax技術[8]-全域Ajax設定、輔助方法.rar,很常用

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax02.html

用戶端

<!DOCTYPE html><!--課件_53.第九章：Ajax技術[8]-全域Ajax設定、輔助方法.rar,很常用--><html id="html"><head>    <meta charset="utf-8" />    <title>demo</title>    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>    <style type="text/css">    </style>    <script type="text/javascript">        $(function(){//2、Ajax請求全域設定----------------------------------------------------------------------------------            /*             $.ajaxSetup({//為後面的Ajax請求作預設的配置。             timeout:2000             });             $('button:eq(0)').click(function(){             $.ajax('test/return.php');             });             $('button:eq(1)').click(function(){             $.ajax('test/return.php',{             timeout:10000             });             });             */            /*             $(document).ajaxComplete(function(event,jqXHR,ajaxOptions){//在Ajax請求完成之後執行的函數             alert(':))');             console.log(ajaxOptions);             });             $(document).ajaxError(function(event,jqXHR,ajaxOptions,thrownError){             console.log(thrownError);             });             $('button:eq(0)').click(function(){             $.ajax({             url:'test/return.php',             dataType:'json'             });             });             $('button:eq(1)').click(function(){             $.ajax('test/return.php',{             global:false//不觸發全域的Ajax請求回呼函數             });             });             *///jQuery提供的Ajax輔助方法,很重要--------------------------------------------------------------------------------------            //對傳入的對象進行url轉碼以及 轉為查詢字串即：序列化。            //console.log($.param({name:"孫勝利",sex:true,info:"哈哈哈"}));            //ajax進行表單提交，這是非常重要的            $('form').submit(function(jqE){//                console.log($(this).serializeArray());//將表單轉換成資料對象。                var formData=$(this).serialize();//一次性得到表單的所有資料,且對名稱和值url編碼，序列化，用於Ajax請求發生非常方便。                $.ajax({                    url:'return.php',                    type:'post',                    data:formData                });                jqE.preventDefault();//阻止預設行為            });        });    </script></head><body><button>開始0</button><button>開始1</button><div id="div1">    div1</div><form style="margin:10px;">    <div>姓名：<input type="text" name="username" /></div>    <div>性別：<label><input type="radio" name="sex" value="男" />男</label> <label><input type="radio" name="sex" value="女" />女</label></div>    <div>運動：<label><input type="checkbox" name="sport[]" value="足球" />足球</label>        <label><input type="checkbox" name="sport[]" value="籃球" />籃球</label>        <label><input type="checkbox" name="sport[]" value="乒乓球" />乒乓球</label>        <label><input type="checkbox" name="sport[]" value="羽毛球" />羽毛球</label>    </div>    <div>簡介：<textarea name="info"></textarea></div>    <div><input type="submit" value="提交" /></div></form></body></html>

return.php

伺服器端

<?phpsleep(1);$html=<<<A<ul class="ul0">    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li></ul><ul class="ul1">    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li>    <li>哈哈。</li></ul>A;$json=<<<A{"name":"孫勝利"}A;//echo $html;//echo 'hello world';print_r($_POST);?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More