jQuery Ajax與JSON詳細講解,Ajax傳參和接受返回值

jQuery Ajax是流行了很久的請求方式,jQuery是對JavaScript的封裝的產物,豐富的選擇器,優雅的Ajax寫法,風靡一時,同時對JSON支持也是很優雅的,因為目前我們大部分Ajax請求都采用JSON來完成前后端之間的數據交互。

jQuery $.ajax 提交JSON與返回JSON解析

用一個jQuery的JavaScript來寫一個ajax,來講述怎么提交JSON參數到后端,首先提交JSON數據,后端要以JSON方式接收,另外前端要采用POST提交方式,下面來直接看代碼。

先介紹幾個jQuery的常用參數:

名稱 類型 規則說明
url string 請求連接,可以是相對路徑或者是絕對路徑。
cache Boolean 是否緩存,默認true,false為不緩存。
type string 請求方式,get、post、put、delete、update、option。
data String/JSON 請求的參數,可以是&拼接的方式或者JSON對象提交方式
dataType string 預期返回的類型,可選值有,json、xml、html、script、jsonp、text
success Function 成功回調的方法。
error Function 失敗調用的方法。

具體代碼直接看下面:

$.ajax({
    url:"https://cdn.www.380127.tw/file/demo-json.json",
    cache:false,
    type:"get",
    data:{"name":"Alice","age":23},
    dataType:'json',
    success:function (json) {
        console.log('返回值-轉換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);
    },
    error:function (e) {
        //錯誤信息
        console.log(e.message);
    }
});

我們從瀏覽器的請求信息里,可以看到返回值,如下圖:

JSON提交返回參數

jQuery $.get 提交JSON與返回JSON解析

用一個jQuery封裝的get ajax提交,簡單方便,下面來直接看代碼。

先介紹幾個 $.get的參數:

  • 第一個參數為 url,可以是相對路徑或者絕對路徑。
  • 第二個參數為 參數,可以是JSON 或者 key=value&key2=value2的get提交的方式。
  • 第三個參數為 success 方法,成功后調用。
  • 第四個參數為 期望的返回類型,可選值有,json、xml、html、script、jsonp、text

具體代碼直接看下面:

$.get("https://cdn.www.380127.tw/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);
    },
    'json'
);

我們從瀏覽器的請求信息里,可以看到返回值和上面的一樣:

jQuery $.post 提交JSON與返回JSON解析

用一個jQuery 封裝的post請求方式,簡單清晰的參數設置,下面來直接看代碼。

先介紹幾個 $.post 的參數:

  • 第一個參數為 url,可以是相對路徑或者絕對路徑。
  • 第二個參數為 參數,可以是JSON 或者 key=value&key2=value2的get提交的方式。
  • 第三個參數為 success 方法,成功后調用。
  • 第四個參數為 期望的返回類型,可選值有,json、xml、html、script、jsonp、text

具體代碼直接看下面:

$.post("https://cdn.www.380127.tw/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);
    },
    'json'
);

我們從瀏覽器的請求信息里,可以看到返回值和上面的一樣:

jQuery $.getJSON 提交JSON與返回JSON解析

用一個jQuery 封裝的getJSON請求方式,省略了第四個參數,默認為JSON。

先介紹幾個 $.post 的參數:

  • 第一個參數為 url,可以是相對路徑或者絕對路徑。
  • 第二個參數為 參數,可以是JSON 或者 key=value&key2=value2的get提交的方式。
  • 第三個參數為 success 方法,成功后調用。

具體代碼直接看下面:

$.getJSON("https://cdn.www.380127.tw/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);
    }
);

如果沒有參數。那還可以這么寫,直接省略或者以直接寫null/{}。

$.getJSON("https://cdn.www.380127.tw/file/demo-json.json",
    function (json) {
        console.log('返回值-轉換JSON對象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);
    }
);

結言

  • jQuery有2點最好用的封裝,一個是jQuery的選擇器,另外一個就是ajax的封裝了,其實jQuery的ajax的封裝很豐富,有時間的同學可以看看jQuery的API。

  • $.ajax/$.post/$.get/$.getJSON 前面的$符號,都可以用 jQuery來替代(一般是解決沖突的時候,$被其他JS占用了)。

  • $.post/$.get/$.getJSON,第二個參數,就是提交參數如果沒有,這里可以直接寫null/{},甚至不寫。

  • jQuery Ajax跨域請看:JSONP 跨域請求教程

  • 原生JavaScript編寫Ajax請求:原生JavaScript Ajax與JSON的講解

  • 【jQuery下載&免費引用】:jquery下載

版權所屬:SOJSON(原創文章)

原文地址:http://www.380127.tw/json/json_ajax-jquery.html

轉載時必須以鏈接形式注明原始出處及本聲明。

支付掃碼

所有贊助/開支都講公開明細,用于網站維護:贊助名單查看

查看我的收藏

正在加載... ...

时时乐上海走势图连线