Ajax与JSON详细讲解,Ajax传递JSON数据与Ajax接收JSON数据

AjaxJSON是密弗成分的,由于今朝我们大年夜部分Ajax请求都采取JSON来完成前后端之间的数据交互。

Ajax传递JSON数据

用一个原生的JavaScript来写一个Ajax,来讲述怎样提交JSON参数到后端,起首提交JSON数据,后端要以JSON方法接收,别的前端要采取POST提交方法,下面来直接看代码。

Ajax原生的JavaScript写法分为六步:

  • 1.创建Ajax request对象
  • 2.绑定监听回调函数
  • 3.翻开一个Ajax请求
  • 4.设置请求头(setRequestHeader) ,详细要设置甚么请求头,这个看营业须要。
  • 5.发送请求。
  • 6.接收请求。

详细代码直接看下面:

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //断定前往状况能否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输入数据
        console.log('前往值',res);
    }else{
        //缺点
        console.log('error');
    }
};

/**
 * 3.翻开请求
 * 第一个参数为请求方法,经常使用可选为 GET/POST,还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接,可所以相对途径和相对途径。
 * 第三个参数设置请求为同步照样异步,true为异步,false为同步
 */
request.open("POST","https://cdn.exergyanc.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 办法可以设置请求头,这个看营业须要,这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方法:request.send();
 *
 * POST请求方法:可以传参,可所以字符型的JSON或许 ?和 &方法以下:
 * request.send("name=Alice&age=23");
 * //这个方法假设后端接收不到参数,请把请求头改成 "Content-type","application/json"
 *
 *
 *
 */
//发送JSON数据
request.send('{"name":"Alice","age":23}');

我们从浏览器的请求信息里,可以看到提交参数,以下图:

JSON提交前往参数

Ajax接收JSON数据

Ajax接收JSON数据,是表示被请求方前往为JSON数据,前端须要接收数据,并且解析数据。

Ajax 步调照样和下面一样,照样6个步调,我们直接看代码。

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //断定前往状况能否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输入数据
        console.log('前往值',res);

        /**
         * 假设前来往的参数是JSON,便可以直接转换。
         */
        var json = JSON.parse(res);
        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);

    }else{
        console.log('error');
    }
};

/**
 * 3.翻开请求
 * 第一个参数为请求方法,经常使用可选为 GET/POST,还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接,可所以相对途径和相对途径。
 * 第三个参数设置请求为同步照样异步,true为异步,false为同步
 *
 * 备注:GET请求,直接把参数以 ?和 & 来传参,如 url+  ?name=Alice&age=23
 */
request.open("GET","https://cdn.exergyanc.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 办法可以设置请求头,这个看营业须要,这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方法:request.send();
 *
 * POST请求方法:可以传参,可所以字符型的JSON或许 ?和 &方法以下:
 * request.send("name=Alice&age=23");
 * //这个方法假设后端接收不到参数,请把请求头改成 "Content-type","application/json"
 * request.send('{"name":"Alice","age":23}');
 *
 *
 */
request.send();

                            

我们从浏览器控制台(console)看到输入的内容:

JSON参数输入

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

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

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

付出扫码

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

检查我的收藏

正在加载... ...