久久天天躁狠狠躁夜夜免费观看,精品国产粉嫩内射白浆内射双马尾,久久国产欧美日韩精品,久久久久久性高,激情欧美成人久久综合

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

jQuery Ajax是流行了很久的請求方式，jQuery是對JavaScript的封裝的產(chǎn)物，豐富的選擇器，優(yōu)雅的Ajax寫法，風(fēng)靡一時，同時對JSON支持也是很優(yōu)雅的，因為目前我們大部分Ajax請求都采用JSON來完成前后端之間的數(shù)據(jù)交互。

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

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

先介紹幾個jQuery的常用參數(shù)：

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

具體代碼直接看下面：

$.ajax({
    url:"https://cdn.sojson.com/file/demo-json.json",
    cache:false,
    type:"get",
    data:{"name":"Alice","age":23},
    dataType:'json',
    success:function (json) {
        console.log('返回值-轉(zhuǎn)換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提交返回參數(shù)

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

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

先介紹幾個 $.get的參數(shù)：

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

具體代碼直接看下面：

$.get("https://cdn.sojson.com/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉(zhuǎn)換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請求方式，簡單清晰的參數(shù)設(shè)置，下面來直接看代碼。

先介紹幾個 $.post 的參數(shù)：

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

具體代碼直接看下面：

$.post("https://cdn.sojson.com/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉(zhuǎn)換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請求方式，省略了第四個參數(shù)，默認(rèn)為JSON。

先介紹幾個 $.post 的參數(shù)：

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

具體代碼直接看下面：

$.getJSON("https://cdn.sojson.com/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉(zhuǎn)換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);
    }
);

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

$.getJSON("https://cdn.sojson.com/file/demo-json.json",
    function (json) {
        console.log('返回值-轉(zhuǎn)換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);
    }
);

結(jié)言

jQuery有2點最好用的封裝，一個是jQuery的選擇器，另外一個就是ajax的封裝了，其實jQuery的ajax的封裝很豐富，有時間的同學(xué)可以看看jQuery的API。
$.ajax/$.post/$.get/$.getJSON 前面的$符號，都可以用 jQuery來替代（一般是解決沖突的時候，$被其他JS占用了）。
$.post/$.get/$.getJSON，第二個參數(shù)，就是提交參數(shù)如果沒有，這里可以直接寫null/{}，甚至不寫。
jQuery Ajax跨域請看：JSONP 跨域請求教程
原生JavaScript編寫Ajax請求：原生JavaScript Ajax與 JSON的講解
【jQuery下載&免費引用】：jquery下載