json
是一种数据格式,以字典的形式展现出来,但是其中必须是双引号
数据格式
数据的一种组装形式
同源
同协议
同域名
同端口
$.ajax() 中同时封装了ajax(不跨域)和jsonp(跨域)请求数据的方式,默认传递数据json格式的
ajax
# 必须在入口函数中执行
ajax二种书写方式
第一种
ajax中的字段
$.ajax({
url:"/index_data", //支持同源协议
type:"get", //请求方式
dataType:"json", //数据返回的类型
data:{code:codes}, // 需要传递的参数
contentType:"application/json",
success:function(args)
{
//请求成功之后执行
console.log(args)
},
error:function()
{
//请求失败,指的的下面某个环节出现了问题,需要重新确认一下
//url:"/index_data", //支持同源协议
//type:"get", //请求方式
//dataType:"json", //数据返回的类型
//data:{code:codes}, // 需要传递的参数
alert("请求超时,请刷新界面")
},
async:"true" // 默认是异步传输
})
第二种
$.ajax({
url:"/index_data",
type:"get",
dataType:"json",
data:{code:codes}, // 需要传递的参数
.done(function(){
// 请求成功之后执行
alert("OK")
}),
.fail(function(){
// 请求失败
alert("NG")
})
async:"true" // 默认是异步传输
})
jsonp
跨域请求数据(指有可能访问别人的服务器)
是一种协议 p -> Protocol
原理
通过<script src="http://www.baidu.com"></script>中的src来发起请求
$.ajax({
url:"https://www.so.com",
type:"get",
dataType:"jsonp",
data:{code:codes}, // 传递过程中需要传递的参数
.done(function(){
alert("OK")
})
.fail(function(){
alert("NG")
})
async:"true" // 默认是异步传输
})
axios请求
axios 是一个基于Promise 用于浏览器和nodejs的HTTP客户端,它本身具有以下特征:
1)从浏览器中创建 XMLHttpRequest
2)从node.js发出http请求
3)支持PromiseAPI
4)拦截请求和响应
5)转换请求和响应数据
6)取消请求
7)自动转换JSON数据
8)客户端支持防止 CSRF/XSRF
两种方式如下:
funcAdd:function(args){
console.log(args)
// 访问服务器的url
// 连接处没有 ","
axios({
url:'/add_data',
method:'get',
dataType:'text', // 发送的数据格式
params:{"code":args}, // 传参关键字必须是params
responseType: json // 返回响应的数据格式
})
.then(function(ret){
//请求成功后执行的代码块
alert(ret.data)
})
.catch(function(){
alert("请求失败")
})
}
// 这是一种含有箭头函数的axios的请求方式
axios.get(this.host + '/usernames/' + this.username + '/count/', {
responseType: 'json'
})
.then(response => {
if (response.data.count > 0) {
this.error_name_message = '用户名已存在';
this.error_name = true;
} else {
this.error_name = false;
}
})
.catch(error => {
console.log(error.response.data);
})