Jquery中的AJAX
引入bootCDN中的Jquery,不用安装环境,HTML CSS用bootstrapCSS框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery发送AJAX请求</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">Jquery发送AJAX请求</h2>
<button class="btn-primary">GET</button>
<button class="btn-danger">POST</button>
<button class="btn-info">通用型方法AJAX</button>
</div>
<script>
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jqueryServer',{a:100,b:200},function(data){
console.log(data);
})
})
</script>
</body>
</html>
JS GET请求
//JQuery服务
app.get('/jqueryServer',(request,response)=>{
//设置相应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
response.send('Hello Jquery AJAX');
})
请求头
同时console.log打印也正常,就不贴图了。
POST请求
JS改成APP.ALL
//JQuery服务
app.all('/jqueryServer',(request,response)=>{
//设置相应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
response.send('Hello Jquery AJAX');
})
HTML加一段,注意变化是 . g e t 改成 .get改成 .get改成.post
<script>
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jqueryServer',{a:100,b:200},function(data){
console.log(data);
})
})
</script>
POST请求参数不在name中,而是在form data中
JSON数据处理
后端JS
app.all('/jqueryServer',(request,response)=>{
//设置相应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
const data = {name:'KUN.A.A'};
// response.send('Hello Jquery AJAX');
response.send(JSON.stringify(data));
})
HTML改成
<script>
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jqueryServer',{a:100,b:200},function(data){
console.log(data);
},'json')
})
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:8000/jqueryServer',{a:100,b:200},function(data){
console.log(data);
})
})
</script>
第一个在回调函数加了’json’,第二个不加,以此对比
加了的返回对象,不加的返回字符串,交换请求方式结果也相同
通用方法发送AJAX
HTML中的JQUERY
$('button').eq(2).click(function(){
$.ajax({
//url
url:'http://127.0.0.1:8000/jqueryServer',
//参数
data:{a:101,b:202},
//请求类型
type:'POST',
//响应体结果
dataType:'json',
//成功回调函数
success:function(data){
console.log(data);
},
//超时时间
timeout:2000,
//失败回调
error:function(){
console.log("error");
},
});
});
不加JSON的时候返回为字符串
JS
app.all('/jqueryServer',(request,response)=>{
//设置相应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
const data = {name:'KUN.A.A'}
// response.send('Hello Jquery AJAX');
response.send(JSON.stringify(data));
})
添加自定义头信息
$('button').eq(2).click(function(){
$.ajax({
//url
url:'http://127.0.0.1:8000/jqueryServer',
//头信息自定义
Headers:{
c:114,
d:514
},
//参数
data:{a:101,b:202},
//请求类型
type:'GET',
//响应体结果
dataType:'json',
//成功回调函数
success:function(data){
console.log(data);
},
//超时时间
timeout:2000,
//失败回调
error:function(){
console.log("error");
},
});
});
记得Herader要大写H,本来是不用的但不知为何我需要,DEbug半小时发现
JS 添加可接受全部响应头
//JQuery服务
app.all('/jqueryServer',(request,response)=>{
//设置相应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//可接受全部响应头
response.setHeader("Access-Control-Allow-Headers", "*");
const data = {name:'KUN.A.A'}
// response.send('Hello Jquery AJAX');
response.send(JSON.stringify(data));
})
更具体的内容,或者其他个性化类容,可以参考Jquery中文文档中AJAX部分