1. 程式人生 > >談談 ajax 的不同用法

談談 ajax 的不同用法

var con val 執行 回調 sub get() 自動調用 phone

1. $.ajax() 是jquery通用的一個ajax 封裝,語法:$.ajax( 選項 ) , 選項是一個對象

常用參數:

  聲明一個變量獲取phone值:var xPhone = $(‘#xPhone‘).val();

  $.ajax({

    url:“a.php” ("/api/ser"),                //發送請求的地址

    data: { phone: xPhone, name: $("#username").val() },   // data:{ 後臺接口的參數名:頁面獲取到的變量 }

    type: ‘post‘ ,                     //type默認是get  

    datatype: "json",                  // datatype 指定服務器返回的數據類型

    success: function(data){               // success 是請求成功後的回調函數 ,可以根據需要做一些判斷操作

      console.log("請求成功了");

      if(data.ret_id === 200){

        alert("提交成功");

        window.location.href = "index.html";  // 頁面重定向

      }

    },

    error

: function(e){                //請求失敗時調用

      console.log("服務器請求失敗");

    }

  });

2. $.get() 使用get 方式進行ajax異步請求,語法: $.get(url [,data] [,callback] ),

  參數解釋:url: ajax請求的地址。data: 可選參數,對象類型,發送到服務器的數據會顯示在請求的url中。callback: 可選參數,ajax請求成功時自動調用該函數。

例子:status 狀態碼

  $.get("b.php", {phone: xPhone, name: $("#username").val(), id: ‘111‘}, function(data,status){

    console.log(data)

    if(status === 200){

      console.log("請求成功");    

    }else{

      console.log("請求失敗");

    }

  });

3. $.post() 使用 post 方式進行ajax異步請求, 語法:$.post(url [,data ] [,callback][,type]), 比$.get()多了一個type參數

例子:表單提交的時候請求 ajax

  $("#form1").submit(function(e){

    e.preventDefault();  //阻止表單默認提交

   $.post("./js/a.json", {phone: xPhone, age: xAge}, function(data){

      if(data.ret_cd === 200){

        alert("留言成功");

      }else{

        alert("留言失敗");

      }

   }, "json")            // type: 請求的數據類型(有html xml json),設置為 json, 則返回的格式是json格式的,不設置默認和$.get()返回的一樣,是字符串格式

})

4. $.getJSON(): 用於ajax獲取json數據,語法: $.getJSON(url [,data] [,callback]) ,參數解釋同$.get() $.post()

  $.getJSON可以通過把請求url寫成"aaa.php?callback=X" , 讓程序執行回調函數X。

  缺點:發送的數據量不能太多,否則造成url太長接收失敗

談談 ajax 的不同用法