脚本宝典收集整理的这篇文章主要介绍了学习AJAX必知必会(4)~JQuery发送Ajax请求,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
客户端html处理:
$('button').eq(0).click(function () {
//$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
$.get('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
console.log(data);
}, 'json');
});
服务端jquery-server请求的处理:
app.get('/jquery-server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小黑',
age: 18,
sex: '男'
};
//设置响应体
response.send(JSON.stringify(data));
});
客户端html处理:
$('button').eq(1).click(function () {
//$get方法的回调参数接收一个data作为参数---是服务端响应回来的数据(响应体),然后设置响应的数据格式为json
$.post('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
console.log(data);
}, 'json');
});
服务端jquery-server请求的处理:
app.post('/jquery-server', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小白',
age: 18,
sex: '男'
};
//设置响应体
response.send(JSON.stringify(data));
});
客户端html处理:
$('button').eq(2).click(function () {
$.ajax({
url: 'http://127.0.0.1:8000/jquery-server/delay',//请求路径
data: {a:1,b:2,c:3},//请求参数(请求体)
type:'get',//请求方式
headers:{'Content-Type': 'application/x-www-form-urlencoded'},//请求头
dataType: 'json',//请求的数据格式
timeout:4000,//超时设置
success: function (data) {//请求成功的回调
console.log(data);
},
error: function () {//请求失败的回调
console.log('请求出错');
}
});
});
服务端jquery-server请求的处理:
//jquery-server请求超时处理
app.get('/jquery-server/delay', (request, response) => {
//设置响应头(允许跨域)
response.setHeader('Access-Control-Allow-Origin', '*');
//响应回去一个json对象
const data = {
name: '小迟',
age: 18,
sex: '男'
};
//设置响应体
setTimeout(() => {
response.send(JSON.stringify(data));
}, 3000)
});
以上是脚本宝典为你收集整理的学习AJAX必知必会(4)~JQuery发送Ajax请求全部内容,希望文章能够帮你解决学习AJAX必知必会(4)~JQuery发送Ajax请求所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。