html表单数据ajxa json传递,Ajax与JSON详细讲解，Ajax传递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.yinshua86.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)看到输出的内容：