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.exergyanc.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.exergyanc.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.exergyanc.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.exergyanc.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.exergyanc.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(原创文章)

原文地址:http://exergyanc.com/json/json_ajax-jquery.html

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

付出扫码

一切赞助/开支都讲地下通细,用于网站保护:赞助名单检查

检查我的收藏

正在加载... ...