本篇文章介绍的是在jQuery里如何使用ajax发送请求
jquery里面的单纯的get请求和单纯的post请求比较简洁的，也比较简易
jquery里面ajax通用方法（自定义个化强）
jquery里面ajax通用方法的get请求可以设置（请求类型，参数，头信息）
jquery里面ajax通用方法的post请求可以设置（请求类型，参数，头信息，请求体）
以下的介绍案例，日常中是绝对够用了。
get请求
$.get(url,[data],[callback],[type])
url:请求的URL路由地址
[data]:请求携带的参数
[callback]:载入成功时回调函数
[type]:设置返回内容格式
post请求
$.post(url,[data],[callback],[type])
在猫云的加速cdn里面获取jquery的链接
https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
案例
测试图为
通过jquery里面的get,post,ajax方法获取服务端返回的结果
jquery里面的ajax方法中个get请求设置请求头
1.创建在testten文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建server.js文件
测试代码为
simpel.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 存放jquery链接 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<!-- 添加允许跨源属性获取链接 向该链接发送请求的时候不会发送当前域名下的cookies 一般当前域名的cookies存放着你的帐号密码-->
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<button style="background-color: tomato;">GET,非json数据格式</button>
<button style="background-color: tomato;">GET,json格式数据返回</button>
<button style="background-color: violet;">POST,json格式数据返回</button>
<button style="background-color: chartreuse;">通用ajax请求</button>
<div id="result" style="width: 180px;height: 100px;border: solid 2px teal;"></div>
<script>
// jquery里面的get请求 服务端设置了字符串格式返回
// jquery设置绑定事件 第二个按钮（下标为1的按钮）,绑定事件函数为点击 $('button').eq(0).click(function(){});
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:8000/jqueryget',{
a:300,b:400},function(data){
console.log(data);
})
});
// jquery里面的get请求 服务端设置了json格式返回 前端get的请求参数也设置了json格式接收
// jquery设置绑定事件 第一个按钮（下标为0的按钮）,绑定事件函数为点击 $('button').eq(0).click(function(){});
$('button').eq(1).click(function(){
$.get('http://127.0.0.1:8000/jquerygetjson',{
a:100,b:200},function(data){
console.log(data);
// 设置返回内容格式——json数据格式
},'json')
});
// jquery里面的post请求 服务端设置了json格式返回 前端post的请求参数没有设置接收格式
// jquery设置绑定事件 第二个按钮（下标为1的按钮）,绑定事件函数为点击 $('button').eq(0).click(function(){});
$('button').eq(2).click(function(){
$.post('http://127.0.0.1:8000/jquerypostjson',{
a:300,b:400},function(data){
console.log(data);
// 设置返回内容格式——不添加json格式，则前端显示的为字符串
})
});
// 使用jquery通用方法来进行ajax请求
$('button').eq(3).click(function(){
$.ajax({
// url
url: 'http://127.0.0.1:8000/jqueryajax',
// 参数
data:{
a:500,b:600},
// 请求类型
type:'GET',
// 响应体结果格式设置 不设置则为字符串 如果设置了json格式数据接收，返回的结果不是json则会报错
dataType: 'json',
// 成功的回调
success: function(data){
console.log(data);
},
// 其他设置
// 超时时间
timeout: 3000,
// 失败的回调，测试这个，设置后端返回的时间延时就可以了,后端设置延时1秒，这里可以设置1秒就行，必定出错成功
error:function(){
console.log("出错了，超时成功。");
},
// 设置头信息
headers:{
qq: 999,weixin: 999}
});
});
</script>
</body>
</html>
server.js文件
// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则 里面的形参 request与response (自己可以随便定义名字的)
// 建议写成 request与response 因为可以见名思意，方便自己看
// request 对请求报文的封装
// responst 对响应报文的封装
// 请求路径为'/server'
// 当使用post请求时候会因为发送的信息没有收到对应的结果所以回报错
// 所以该处使用all 表示可以接收任意类型的请求 如get post 等等
// 一：get请求
app.get('/jqueryget', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
response.send('get请求成功，非json数据返回.');
});
// 二 ：get请求json数据
app.get('/jquerygetjson', (request, response)=>{
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 响应头 *号表示所有的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers','*');
// 响应一个数据 把这个对象返回给浏览器
const data = {
name: 'get请求，服务端设置了json格式返回 前端get的请求参数也设置了json格式接收'
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
setTimeout(()=>{
response.send(str);},1000);
});
// 三：post请求 json数据
app.post('/jquerypostjson', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {
name: 'post请求，服务端设置了json格式返回 但是前端post的请求参数没有设置接收格式'
};
let str = JSON.stringify(data);
setTimeout(()=>{
response.send(str);},1000);
});
// 四：ajax通用请求
app.all('/jqueryajax', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data = {
name: 'jquery的通用请求GET请求，服务端设置了json格式返回 前端的请求参数设置接收格式为json'};
let str = JSON.stringify(data);
setTimeout(()=>{
response.send(str);},1000);
});
// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{
console.log("服务已经启动，8000端口监听中......");
});