jQuery里如何使用ajax发送请求

回到文章总目录

本篇文章介绍的是在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({// urlurl: '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端口监听中......");
});

更多的方法可以参考以下网址
https://jquery.cuishifeng.cn/

jQuery里如何使用ajax发送请求相关推荐

Django Ajax发送请求使用方法
首先需要引入Jquery这个库其次: 需要引入csrf_token 原因是因为django 表单认证需要csrf认证最后,就是正常执行ajax发送请求示例代码如下: <script src ...
js采用ajax发送请求获取数据（实例操作）
来,案例之前,容我分享一下js如何发送请求. 原生js发送请求: let xhr= new XMLHttpRequest(); // methods:GET/POST请求方式等,url:请求地址,tr ...
React ajax 发送请求（六）
React ajax 发送请求(六) React 官网链接: 英文官网中文官网接着上节 React 代理配置(五) 前言在实际做React 项目的时候, 前端应用需要通过 ajax 请求与后台进 ...
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
AJAX，SpringMVC，拦截器（Ajax发送请求经过SpringMVC拦截器重定向其他页面失败）
Ajax发送请求经过SpringMVC拦截器重定向其他页面失败借鉴出处 Ajax是通过异步请求后台,获取数据,局部刷新页面,因此,即使后台进行页面跳转的编码,前台请求完毕以后,只会执行ajax的回 ...
JS中的Ajax发送请求获取数据流程
前言: JS两个常用的请求方法 [XMLHttpRequest() .fetch()] XMLHttpRequest() 的使用方法大致可以分为四步: 1.创建XMLHttpRequest的对象成员 ...
超级详细Ajax发送请求（接受提示信息或者返回参数）
Ajax 在网页开发中必不可少,经常遇到,这里我写一下开发过程中比较常用的技术. 开发重点注意: 1.用户体验 2.程序性能.安全.可维护性.等等 // 提交数据到后台处理 $.ajax({url: ...
$.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
ajax发送请求和数据返回,Ajax发送和接收请求
首先Ajax的不刷新页面提交数据基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... // IE浏览器 if(Acti ...

jQuery里如何使用ajax发送请求

案例

jQuery里如何使用ajax发送请求相关推荐

最新文章

热门文章