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

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

名稱	類型	規(guī)則說明
url	string	請(qǐng)求連接，可以是相對(duì)路徑或者是絕對(duì)路徑。
cache	Boolean	是否緩存，默認(rèn)true，false為不緩存。
type	string	請(qǐng)求方式，get、post、put、delete、update、option。
data	String/JSON	請(qǐng)求的參數(shù)，可以是&拼接的方式或者JSON對(duì)象提交方式
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對(duì)象',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) {
        //錯(cuò)誤信息
        console.log(e.message);
    }
});

我們從瀏覽器的請(qǐng)求信息里，可以看到返回值，如下圖：

用一個(gè)jQuery封裝的get ajax提交，簡(jiǎn)單方便，下面來直接看代碼。

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

• 第一個(gè)參數(shù)為 url，可以是相對(duì)路徑或者絕對(duì)路徑。
• 第二個(gè)參數(shù)為 參數(shù)，可以是JSON 或者 key=value&key2=value2的get提交的方式。
• 第三個(gè)參數(shù)為 success 方法，成功后調(diào)用。
• 第四個(gè)參數(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對(duì)象',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'
);

我們從瀏覽器的請(qǐng)求信息里，可以看到返回值和上面的一樣：

用一個(gè)jQuery 封裝的post請(qǐng)求方式，簡(jiǎn)單清晰的參數(shù)設(shè)置，下面來直接看代碼。

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

• 第一個(gè)參數(shù)為 url，可以是相對(duì)路徑或者絕對(duì)路徑。
• 第二個(gè)參數(shù)為 參數(shù)，可以是JSON 或者 key=value&key2=value2的get提交的方式。
• 第三個(gè)參數(shù)為 success 方法，成功后調(diào)用。
• 第四個(gè)參數(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對(duì)象',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'
);

我們從瀏覽器的請(qǐng)求信息里，可以看到返回值和上面的一樣：

用一個(gè)jQuery 封裝的getJSON請(qǐng)求方式，省略了第四個(gè)參數(shù)，默認(rèn)為JSON。

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

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

具體代碼直接看下面：

$.getJSON("https://cdn.sojson.com/file/demo-json.json",
    {"name":"Alice","age":23},
    function (json) {
        console.log('返回值-轉(zhuǎn)換JSON對(duì)象',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對(duì)象',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點(diǎn)最好用的封裝，一個(gè)是jQuery的選擇器，另外一個(gè)就是ajax的封裝了，其實(shí)jQuery的ajax的封裝很豐富，有時(shí)間的同學(xué)可以看看jQuery的API。

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

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

• jQuery Ajax跨域請(qǐng)看：JSONP 跨域請(qǐng)求教程

• 原生JavaScript編寫Ajax請(qǐng)求：原生JavaScript Ajax與JSON的講解

• 【jQuery下載&免費(fèi)引用】：jquery下載