IT工程師數位筆記本

在編寫代碼的過程中，我們會用到一些的需要局部刷新，而且需要數據傳遞的情況，我們通常是有$.ajax() ,$.post(),$.get() 這三種方式。

$.ajax()方法通過 HTTP 請求加載遠程數據。

最簡單的情況下，$.ajax() 可以不帶任何參數直接使用。

注意：所有的選項都可以通過 $.ajaxSetup() 函數來全局設置。

$.ajax({
      type: "POST",      //data 傳送數據類型。post 傳遞
      dataType: 'json',  // 返回數據的數據類型json
      url: "/site/abc",  // yii 控制器/方法
      cache: false,      
      data: {tel: tel},  //傳送的數據
      error:function(){
         alert("數據傳輸錯誤");
      },success: function (data) {
         if(window.console){
            console.log(data);
         }
      }
})         

         

$.ajax 的屬性：【詳解】http://www.w3school.com.cn/jquery/ajax_ajax.asp

dataType

類型：String

預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:

• "xml": 返回 XML 文檔，可用 jQuery 處理。
• "html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行。
• "script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標簽來加載）
• "json": 返回 JSON 數據 。 輸出 數據（yii控制器中）

  public function(){
        echo CJSON::encode($message);
  }

  　　

• "jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
• "text": 返回純文本字符串

data

類型：String

發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

error

類型：Function

默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

如果發生了錯誤，錯誤信息（第二個參數）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

$.post() 方法通過 HTTP POST 請求從服務器載入數據。【詳細】http://www.w3school.com.cn/jquery/ajax_post.asp

語法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

例子：

向頁面 test.php 發送數據，并輸出結果（HTML 或 XML，取決于所返回的內容）：

1 $.post("test.php", { name: "John", time: "2pm" },
2    function(data){
3      alert("Data Loaded: " + data);
4    });

$.get()  【詳細】http://www.w3school.com.cn/jquery/ajax_get.asp

例子：

1 $("button").click(function(){
2   $.get("demo_ajax_load.txt", function(result){
3     $("div").html(result);
4   });
5 });

例子 1

請求 test.php 網頁，傳送2個參數，忽略返回值：

$.get("test.php", { name: "John", time: "2pm" } );

例子 2

顯示 test.php 返回值(HTML 或 XML，取決于返回值)：

$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

例子 3

顯示 test.cgi 返回值(HTML 或 XML，取決于返回值)，添加一組請求參數：

$.get("test.cgi", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });