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.yinshua86.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.yinshua86.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.yinshua86.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.yinshua86.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.yinshua86.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下载

版权所属:SOJSON(原创文章)

原文地址:https://www.sojson.com/json/json_ajax-jquery.html

转载时必须以链接形式注明原始出处及本声明。

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...