jQuery Ajax与JSON详细讲解，Ajax传递JSON数据与Ajax接受JSON数据

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.sojson.com/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.sojson.com/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.sojson.com/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.sojson.com/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.sojson.com/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下载