$.ajax异步请求总结

news2024/11/17 0:36:01

$.ajax()简单介绍

AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分

$.ajax()是万能的,是最基础,最全面的那个;剩余的方法都是针对某种特定场景下的$.ajax()的简化形式
$.ajax()、$.post()、$.get()这三个方法都是Ajax方法中一种与服务器交换数据的请求类型。
$.post() 是post请求时的$.ajax()的简写形式;
$.get()get请求时的$.ajax()的简写形式。

$.ajax()基础浏览器请求和响应头常识

1.携带的参数data是可选的,关注var xhr = createXHR();
$.ajax contentType 和 dataType ,
contentType 主要设置你发送给服务器的格式,
dataType设置你收到服务器数据的格式
ContentType 用来告诉服务器当前发送的数据是什么格式
Accept 用来告诉服务器,客户端能认识哪些格式,最好返回这些格式中的其中一种
consumes 用来限制ContentType
produces 用来限制Accept

在http 请求中,get 和 post 是最常用的。在 jquery 的 ajax 中, 
contentType都是默认的值:application/x-www-form-urlencoded,
这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。
如: wwwh.baidu.com/q?key=fdsa&lang=zh 这是get, 而 post 请求则是使用请求体,参数不在 url 中,
在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。
如果传递的data数据是单层嵌套的json格式字符串,则默认格式即可,如果是有多层嵌套的复杂json格式字符串,
则需要修改contentType:‘application/json’,不然服务端拿不到数据。

$.ajax()基础写法

$.ajax({url,type,data,dateType,callback(success,error)});
$.post(url,data,callback,type);
<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
#这个record象征接收传参
function wait_Dispatch_Function(record){
	debugger;
	var parameter = {id:record.id};
	$.ajax({
		url:"",
		type:"",
		data: {id:record.id},
		dataType:"json",	//服务器数据返回类型
		success:function (res,xhr) {},
		error:function (xhr,status,info) {alert("获取结果失败",xhr+status+info);}
	})
}

$.ajax()写法分析

1.type:请求方式,常见post、get方式
2.data:请求携带的参数携带的参数data是可选的
3.dataType:告诉服务器接收返回的数据类型为json,就是接口返回的数据类型为json才能匹配此路径,
那么此接口在返回数据的时候做返回数据类型的处理,常用的是JSONObejec方法封装key 和 value
4.success:接口请求服务器处理成功执行的函数
5.error:接口请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。
注意:ajax中success反映的是请求接口成功或者失败的一种状态

$.ajax()简写 post方式

语法格式

selector:选择器
$(selector).post(URL,data,function(data,status,xhr),dataType).error(function (xhr, status, info) {
    alert("error");
});
dataType:告诉服务器接收返回的数据类型为json,就是接口返回的数据类型为json才能匹配此路径,
那么此接口在返回数据的时候做返回数据类型的处理,常用的是JSONObejec方法封装key 和 value

简写举例:

function wait_Dispatch_Function(record) {
$.post("url",{id:record.id},function (res) {
		if(res.result == "success"){//一种判断标志的定义	
			var data =res.yourKeyName;
			var message =res.message;
			 
		 //依次类推其他相关处理,比如给前台数据赋值刷新页面
		  ......
		}
		else{			
		}
	},"JSON").error(function (xhr, status, info) {
	//根据xhr状态码继续细分并返回给前端浏览器
	 if(xhr.status == 500){
     //do something 服务器内部错误
		alert("提示:服务器内部错误");
   }
	 if(xhr.status == 404){
     //do something 路径错误
     alert("提示:路径找不到");
   }
   //依次类推
   ......
    alert("error");
});
}

$.ajax()请求的接口内的数据处理

举例

#控制层
@Controller
@RequestMapping("/yourFunction")
public class yourFunctionController {
@Autowired
    yourClassService yourService;
	@RequestMapping("/yourFunctiondetailway")
	@ResponseBody
	String yourFunctiondetailway(Integer id) {
		return yourService.yourFunctiondetailway(id);
	}
}

#实现层
@Override
public String yourFunctiondetailway (Integer id ){
	JSONObject jObject = new JSONObject();
	jObject.put("result", "fail");
	jObject.put("message", "查询失败");
	
	try{
	
	//doFuntionHandle
	......
	
	jObject.put("result", "定义成功的标志");//可以为 200或者 success
	jObject.put("message", "查询成功");
	jObject.put("yourkeyName", value1);
	jObject.put("yourkeyName", value2);		
	}catch (Exception e) {
		jObject.put("message", "XXX异常报错:"+e.toString());
		e.printStackTrace();
	}		
	return jObject.toJSONString();
}

$.ajax()请求复杂处理

菜鸟教程
参考这个同志总结
在这里插入图片描述

dataType

要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30357.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java环境变量学习

0. 找到你的安装路径 C:\Program Files\Java 这种语言的开发工具&#xff0c;重要的东西建议就安装在C盘 0.1 里面有什么&#xff1f; 其实就是很多java命令而已 用来编译的&#xff0c;运行的 JDK开发用的JRE运行用的 就像python中给你开发工具的同时&#xff0c;再给你一个…

[附源码]java毕业设计学习资源共享与在线学习系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Jetpack Compose中的state核心思想

Compose 中的状态 应用的“状态”是指可以随时间变化的任何值。这是一个非常宽泛的定义&#xff0c;从 Room 数据库到类的变量&#xff0c;全部涵盖在内。 所有 Android 应用都会向用户显示状态。下面是 Android 应用中的一些状态示例&#xff1a; 聊天应用中最新收到的消息…

Unity3D : 本地坐标系,世界坐标系,和TransformPoint,TransformVector,TransformDirection的区别

目录 一、世界坐标系与本地坐标系 二、srcGameObject.transform.TransformPoint(Vector3 vec) 三、srcGameObject.transform.TransformVector(Vector3 vec) 四、srcGameObject.transform.TransformDirection(Vector3 vec) 五:示例 一、世界坐标系与本地坐标系 世界坐标很…

[LabVIEW]圖像內的物件計算_Count objects

NI雖然是以賣硬件為主的公司&#xff0c;但其在軟件(LabVIEW)的著墨也相當深厚&#xff0c;尤其是各類應用模組的更新速度和對應功能。 每每不經意地碰觸到新版本的LabVIEW&#xff0c;都會不由自主地翻閱和嘗試新增模組。 本文藉由兩個模組串接簡易製作一支圖像計數程式&…

七、模型评估指标

当训练好模型之后&#xff0c;检测模型训练效果如何&#xff0c;评价指标有哪些&#xff1f;通过查阅相关资料&#xff0c;我将以这五个指标来对所训练的模型进行评估&#xff0c;下图是评价指标运行结果图。 一、混淆矩阵&#xff08;Confusion Matrix&#xff09; 解释&…

【网安神器篇】——Whatweb指纹识别工具

作者名&#xff1a;Demo不是emo 主页面链接&#xff1a;主页传送门创作初心&#xff1a;舞台再大&#xff0c;你不上台&#xff0c;永远是观众&#xff0c;没人会关心你努不努力&#xff0c;摔的痛不痛&#xff0c;他们只会看你最后站在什么位置&#xff0c;然后羡慕或鄙夷座右…

CV—cs231n二刷

文章目录cv应用优化训练牛顿法HOGYOLO风格迁移GAN语义分割实例分割LSTMDL框架GPU相关cs231n.stanford.edu cv应用 图像分类、目标检测、人脸识别、语义分割、风格迁移、GAN生成、VQA多模态、点云分割、姿态估计、游戏学习等 优化训练 避免后期训练还在大幅震荡&…

[carla] GNSS传感器与Carla坐标系 转换方法

文章目录方法1:通过python API直接获取转换后坐标1.1 GNSS传感器消息-内容介绍1.2 在线获取方法1.3 完整代码方法2-通过离线读取转换关系的方式转换2.1 转换类代码和使用方法2.2 转换矩阵保存和读取2.3 运行结果2.5 注意事项附件 所有地图的转换矩阵参考链接:方法1:通过python …

工作中学到的一些小点

1.结构体对齐 记得之前面试的时候被问过这个问题【汗】 这个结构体占多大 struct sExample {char c;int n; };占8字节&#xff0c;问有没有办法让它占5个字节&#xff1f; 有 #pragma pack(push) //保存对齐状态 #pragma pack(1) //设定为1字节对齐struct sExample {char c;…

qt串口配置(端口号列表选择/自动保存/初始化模板)复制粘贴直接用

一、前言 废话不多说&#xff0c;写这个作为串口模板&#xff0c;后续会继续补充其他模板&#xff0c;有相识功能直接复制模板里东西到程序中&#xff0c;直接使用&#xff0c;无需大的调整&#xff0c;为自己模板记录&#xff0c;也提供给需要的朋友们。 二、环境 qt5.7 win…

R15.3-15.3-15.3-15.3A_哈威泵_样本及应用

R15.3-15.3-15.3-15.3A_哈威泵_样本及应用R11.8-11.8-11.8-11.8-BABSL_水泥行业用主用于钢厂&#xff0c;油田&#xff0c;水利&#xff0c;飞机&#xff0c;压铸机等重型液压设备。 对油泵R11.8-11.8-11.8-11.8-BABSL_水泥行业用的维护保养应注意以下方面&#xff1a; 1.会腐…

项目需求及架构设计

第2章 项目需求及架构设计 2.1 项目需求分析 用户行为数据采集平台搭建 用户行为数据会以文件的形式存储在服务器&#xff0c;这个阶段需要考虑&#xff1a;采集用户行为数据使用的工具,需要提供详细的设计需求 如&#xff1a;flume&#xff0c;flume采用的 source、channel、…

HDFS的Shell操作

该文章主要为完成实训任务及总结&#xff0c;详细实现过程及结果见【参考文章】 参考文章&#xff1a;https://howard2005.blog.csdn.net/article/details/127170478 文章目录一、 三种Shell命令方式二、FileSystem Shell文档三、常用Shell命令四、实例练习1、创建目录2、查看目…

这位00后经历人生重大变故后,选择了智能家居,选择了Aqara绿米

作者 | 布斯 编辑 | 小沐 出品 | 智哪儿 zhinaer.cn编者按&#xff1a;虽然概念由来已久&#xff0c;但智能家居如今依然属于新兴产业。而这样一个当今在全国范围遍地开花的新型商业存在&#xff0c;已经创造了许多的就业岗位与创业机会&#xff0c;也隐藏着许多让人回味的故事…

Profinet总线模拟输出模块

上电后&#xff0c;耦合器自动识别所有与之相连的 I/O 模块&#xff0c;并根据模块的类型、数据宽度和模块在节点中的位置创建内部本地过程映像。 如果添加、更改或移除 I/O 模块&#xff0c;会建立新的过程映像&#xff0c;过程数据地址会改变。在添加 I/O 模块时&#xff0c…

【MySQL】MySQL执行计划与SQL调优提高查询效率(优化篇)(实战篇)(MySQL专栏启动)

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…

Pixel Difference Networks for Efficient Edge Detection论文笔记

文章目录一、背景知识二、Pixel Difference Convolution&#xff08;PDC&#xff09;1.CPDC2.APDC3.RPDC三、轻量化边缘检测网络A. Block_x_yB. CSAMC. CDCMD. 1*1卷积层E. 深度监督&#xff08;deep supervision&#xff09;F. 损失函数四、实验结果1. 消融实验2.网络可扩展性…

SpringAMQP简介及简单使用

一、SpringAMQP简介 SpringAMQP是基于RabbitMQ封装的一套模板&#xff0c;并且还利用SpringBoot对其实现了自动装配&#xff0c;使用起来非常方便。 SpringAmqp的官方地址&#xff1a;https://spring.io/projects/spring-amqp SpringAMQP提供了三个功能&#xff1a; 自动声明…

Maven基础概念

仓库 仓库用于存储资源&#xff0c;包含各种jar包。 仓库分类&#xff1a; 本地仓库&#xff1a;自己电脑作为仓库&#xff0c;连接远程仓库获取资源。远程仓库&#xff1a;非本地的仓库&#xff0c;为本地仓库提供资源。中央仓库&#xff1a;由Maven团队维护&#xff0c;存…