the Web Design Speciailist
Jquery Ajax基本範例
2017-09-08 17:32:17  Jquery

在這個號稱 web 2.0 的時代,寫網站,尤其是還用到了大量的 JavaScript,如果與使用者的互動還沒有用到 Ajax 技術的話,似乎是一件很神奇的事,

Jquery Ajax基本範例,我偶爾忘記會在來這邊觀看一下。

這個 PHP 程式很簡單, recive.php它只回應一個index.php傳入的字串,所以我們現在要做的事情便是:按下按鈕後,向 server 端的 index.php向recive.php 發出一個 request,然後把它回應的東西放alert出來。

所以我們把 Submit 函式的部份寫成這樣:index.php


  1. <html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title></title>
  5.         <script type="text/javascript" src="jquery.js" ></script>
  6.         <script>
  7.          var Submit=function(){
  8.             var URLs="recive.php";
  9.         
  10.             $.ajax({
  11.                 url: URLs,
  12.                 data: $('#sentToBack').serialize(),
  13.                 type:"POST",
  14.                 dataType:'text',
  15.                 success: function(msg){
  16.                     alert(msg);
  17.                 },
  18.                  error:function(xhr, ajaxOptions, thrownError){
  19.                     alert(xhr.status);
  20.                     alert(thrownError);
  21.                  }
  22.             });
  23.          
  24.         }
  25.         </script>
  26.     </head>
  27.     <body>
  28.         <form id="sentToBack">
  29.             <input type="text" name="Text"/>
  30.             <input type="button"  value="送出" onClick="Submit()"/>
  31.         </form>
  32.     </body>
  33. </html>



url:
指定要進行呼叫的位址。


data:傳送至Server的資料,會自動轉為query string的型式,如果是GET請求還會幫你附加到URL。可用processData選項禁止此自動轉換。物件型式則為一Key/Value pairs。這個範例程式,是使用serialize(),會把name為sentToBack的表單中的資料傳送出去,型態的部分要看type的設定,一般表單都是用POST或是GET。


type:請求方式,POST/GET。


dataType:預期Server傳回的資料類型,如果沒指定,jQuery會根據HTTP MIME Type自動選擇以responseXML或responseText傳入你的success callback。可選的資料類型有:

                  xml:傳回可用jQuery處理的XML

                  html:傳回HTML,包含jQuery會自動幫你處理的script tags。

                  script:傳回可執行的JavaScript。(script不會被自動cache,除非cache設為true)

                  json:傳回JSON

                  jsonp:在URL加上?callback=?參數,並在Server端配合送回此jsonp callback。

                  text:傳回純文字字串。


success:請求成功時執行函式。

               

  1.            function (data, textStatus) {
  2.                        // data 可以是 xmlDoc, jsonObj, html, text, 但還是要參考datatype      
  3.            } 


error:請求失敗時執行函式。

          

  1.            function (xhr, ajaxOptions, thrownError) {
  2.                    //通常ajaxOptions或thrownError只有一個有值
  3.            }



complete:請求完成時執行的函式(不論結果是success或error)。

               

  1.             function (XMLHttpRequest, textStatus) {
  2.                    // the options for this ajax request
  3.             }



beforeSend:發送請求之前可在此修改XMLHttpRequest物件,如添加header等,你可以在此函式中return flase取消Ajax request。

                   

  1.             function (XMLHttpRequest) {
  2.                           // the options for this ajax request
  3.             }
  4.  
  5.