Back to the general list of articles
This article describes how to use ajax to send requests in jQuery
jqueryInside the pure get请求and simple post请求relatively simple, relatively simple
jquery里面ajax通用方法(custom months of strong)
jquery里面ajax通用方法in get请求can be set ( 请求类型，参数，头信息)
jquery里面ajax通用方法is post请求can be set ( 请求类型，参数，头信息，请求体)
following presentation of the case, every day is definitely enough.
get request
$.get(url,[data],[callback],[type])
url:请求的URL路由地址
[data]:请求携带的参数
[callback]:载入成功时回调函数
[type]:设置返回内容格式
post request
$.post(url,[data],[callback],[type])
Get it in the accelerated cdn of Maoyun jquery的链接
https://www.bootcdn.cn/
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Case study
The picture shows the test
by jquery inside the get,post,ajaxresult obtaining method returned from the server
jquery里面的ajax方法in a getrequest header setting request
1. Create testten文件夹and inside the folder
2. Create simpel.html文件
3. Create server.js文件
test code is
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端口监听中......");
});
For more methods, please refer to the following URL
https://jquery.cuishifeng.cn/