jQuery调用AJAX异步操作超清晰教程
JQueryAjax使用SpringMVC中MultipartFile进行文件上传
JQueryAjax使⽤SpringMVC中MultipartFile进⾏⽂件上传对于⼀个带有⽂件上传的表单，后台使⽤springMVC封装的MultipartFile file接收⽂件，并且需要使⽤异步提交，并返回相应的提⽰信息使⽤JQUERY的form插件，即jquery.form.js这个插件，然后使⽤插件的ajaxSubmit⽅法；代码如下1 $("#pageForm").ajaxSubmit({2 type: "POST",3 url:"你的action.html",4 dataType: "json",5 success: function(data){6if(data.msg=='SUCCESS'){7 alert(success);8 }9else{10 alert(data.msg);11 }12 }13 });1 @RequestMapping("/insertGoodsBrand")2public void insertGoodsBrand(3 HttpServletRequest request,4 @RequestParam(value = "file", required = false) MultipartFile file,HttpServletResponse response,5 GoodsBrand goodsBrand){6 JSONObject obj = new JSONObject();7 PrintWriter out = null;8try {9 out = response.getWriter();10 String path = request.getSession().getServletContext().getRealPath(11 "upload\\goods\\brand");12 String fileName = file.getOriginalFilename();13 String saveFileName = Common.getNowCorrect2Second() + "."14 + fileName.substring(stIndexOf(".") + 1);15 File targetFile = new File(path, saveFileName);16if (!targetFile.exists()) {17 targetFile.mkdirs();18 }19 String msg = "";20 file.transferTo(targetFile);21 msg = backGoodsBrandBus.insertGoodsBrand(goodsBrand, saveFileName);22if (msg.equals("SUCCESS")) {23 obj.put("msg", msg);24 } else {25 obj.put("msg", msg);26 }27 out.print(obj);28 } catch (Exception e) {29 e.printStackTrace();30 }31finally{32 out.close();33 }34 }。
jQuery_ajax培训教程1
[attribute$=value] 选取属性值以value结束 元素集 $('a[href^="mailto:"]').addClass('mailto'); 的所有元素 合 [attribute*=value]
获取不包含class=ho的 <li>元素 $('a[href$=".xsl"]')：获取所有包含href属性，且属性
window.onload()
网页中所有的内容都加载完毕后触发，包括 元素关联的内容（如链接的图片和资源）都 必须下载完毕后触发 同时编写多个，但只能执行最后一个 无
执行个数 简化写法
jQuery对象
jQuery对象和DOM对象之间的转换
1.3 选择器
CSS选择器
选择器 说明
根据id选择元素 根据类名选择元素 根据标记名选择元素 选择所有元素 将每一个选择器匹配的元 素合并后一起返回
$('td:contains("gmail")').addClass('highlight'); //高亮显示email中有gmail的文本 //为表格行绑定事件,使用jQuery的链式语法连续绑定两个事件到同一个对象 素
获取所有不可用的元素 $('.emp tr').mouseover(function() {
[attribute^=value] 选取属性值以value开头
获取id=menu的元素内的所 有<li>子元素 $(‘li[title!=test2]’)：获取所有包含title属性且属性
值不等于test2的<li>元素
layui中ajax的用法
layui中ajax的用法Layui是一款轻量级的前端UI框架，它以简洁、易用的设计风格受到广泛关注。
在Layui中，ajax是一种常用的数据交互方式，它可以让网页与后端服务器进行通信，获取或提交数据。
本文将详细介绍Layui中ajax的用法。
一、ajax概述ajax的全称是AsynchronousJavaScriptandXML（异步的JavaScript和XML），它是一种使用JavaScript和XML来与服务器进行通信的技术。
通过ajax，网页可以异步地向服务器请求数据，并在不刷新页面的情况下更新网页的内容。
这种技术可以大大提高网页的交互性和用户体验。
在Layui中，ajax的使用方法与其他JavaScript框架类似，主要包括以下步骤：1.引入Layui的ajax模块首先，需要在HTML文件中引入Layui的ajax模块，以便可以使用其中的功能。
可以在HTML文件的头部引入以下代码：<scriptsrc="/path/to/layui/layui.js"></script>2.创建ajax请求使用Layui的ajax模块，可以很方便地创建ajax请求。
可以使用以下代码创建一个GET请求：e('ajax',function(){varajax=layui.ajax;ajax.get({url:'/path/to/api',//后端服务器的API地址{//发送给服务器的数据key1:value1,key2:value2},success:function(response){//请求成功的回调函数console.log(response);//打印服务器的响应数据},error:function(error){//请求失败的回调函数console.log(error);//打印错误信息}});});3.处理服务器响应当ajax请求成功时，服务器会返回响应数据。
ajax中的success方法
ajax中的success方法1.引言1.1 概述概述:AJAX（Asynchronous JavaScript and XML）是一种基于前端的技术，通过使用JavaScript和XML或JSON来实现与服务器之间的异步通信。
它的出现极大地改变了Web开发的方式，使得页面能够实现动态的数据更新，无需重新加载整个页面。
在AJAX中，success方法是作为回调函数之一，用于处理异步请求成功后返回的数据。
当请求成功时，success方法会被调用，并将服务器返回的数据作为参数传递给该方法。
本文将重点介绍和探讨AJAX中的success方法，包括其使用方法、参数和常见的应用场景。
通过深入了解success方法，读者将能够更好地理解AJAX的工作原理，并能够灵活运用这一方法来处理异步请求的返回数据。
接下来的章节将依次介绍AJAX的简介以及其中的success方法，以帮助读者更好地理解和运用该方法。
本文的目的是帮助读者掌握AJAX技术中的关键概念和方法，以便能够在实际的Web开发中灵活运用AJAX 来提升用户体验和页面的性能。
在结论部分，我们将对AJAX中的success方法进行总结，并展望其在未来的应用前景。
通过对success方法的深入学习，读者将能够更好地应用这一方法来处理异步请求返回的数据，提供更好的用户体验，同时也能够更好地理解和应用AJAX技术。
1.2文章结构文章结构是指文章的组织形式和内容安排方式。
一个良好的文章结构可以使读者更容易理解和吸收文章内容，并且可以让作者更清晰地表达自己的观点和论据。
在本篇文章中，我们将按照以下结构组织内容：1. 引言1.1 概述：介绍AJAX（Asynchronous JavaScript and XML）的基本概念和作用，以及它在现代Web开发中的重要性。
1.2 文章结构：说明本篇文章的整体结构和内容安排。
1.3 目的：阐述写作本文的目的，即介绍AJAX中的success方法的作用、用法和实际应用场景。
JqueryAjax如何添加header参数
13
XMLHttpRequest.setRequestHeader(sessionid, sid);
14
},
15
success: function (SessionID) {
16
//alert(SessionID.success);
17
var dt = eval("(" + SessionID.data + ")");
"password": "api"
7
},
8
dataType: "json",
9
ContentType: "application/json",
10
beforeSend: function (XMLHttpRequest) {
11
//HttpUd = "SessionID";
18
if (SessionID.success == 1) {
19
alert("success");
20
}
21
else {
22
alert('errorId:' + SessionID.error.id);
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
四， $复.g制et代JS码O
代码如下:
$.getJSO N("data. $("#getJ S所ON以Re调sp用o 时需要使
);
When Ajax 载入静态 页面 load( url, (dSatraing) (cMaalpl)b(a可ck (Callbac load()方 法可以轻 复制代码
代码如下:
$("#load ing").aj $(t}h)i;s).
全局事件 也 复可制以代帮码
代码如下:
$("#msg" ).before $(t}h)i.sa)j.a xSuccess $(t}h)i.sa)j.a xError(f $}()t;his).
很显然， 第 复三制个代参码
代码如下:
$.ajax({
进一步了 解 前A面JA讨X事论 的一些方 ajaxStar t(全局事 件 be)fo开re始Se n(d局部事 件 a(j全)ax局当Se事一nd 件 s(u局)cc部请es事求s 件 aj)ax请Su求cc e全ss局事件 全 e(r局局ro部的r事请 件 aj)ax仅Er当ro r
全局事件 全 c(o局局mp部的le事发te 件 aj)ax不Co管mp l全et局e事件 全 a(j全局ax局的St事请op 件 局)部当事没件 在之前的 复制代码
代码如下:
$('#ajax 这样， d复at制a.代ht码m
代码如下:
$('#ajax -
实现GET 和POST方 get( url, (dSatraing) (cMaalpl)b(a可ck (Callbac 很显然这 是一个专 复制代码
代码如下:
$.get('l ogin.pihdp
jquery ajax error 写法
写法一：使用error回调函数处理AJAX请求错误1. error回调函数是在AJAX请求发生错误时被调用的函数，可以用来处理各种类型的错误，例如网络错误、服务器错误、超时等。
2. error回调函数的基本语法如下：```$.ajax({url: 'example.php',success: function(data) {// 处理请求成功的逻辑},error: function(xhr, status, error) {// 处理请求发生错误的逻辑}});```上述代码中，error回调函数接受三个参数：xhr（XMLHttpRequest 对象）、status（错误状态）和error（错误信息），我们可以根据这些参数来定制我们的错误处理逻辑。
3. xhr参数包含了有关发生错误的请求和响应的信息，我们可以通过xhr对象的属性来获取这些信息，例如status、statusText、responseText等。
4. status参数是一个字符串，表示发生的错误的类型，常见的值有"error"、"timeout"、"abort"等。
5. error参数是一个字符串，表示发生错误时的具体信息，例如"Internal Server Error"、"Not Found"等。
6. 我们可以根据status和error参数的值，来判断发生的错误类型，并作出相应的处理，例如显示错误提示、重新发送请求、跳转到错误页面等。
写法二：使用$.ajaxSetup全局设置处理AJAX请求错误1. $.ajaxSetup是jQuery提供的一个全局AJAX设置函数，可以用来设置全局的AJAX默认值，包括设置全局的AJAX错误处理函数。
2. 我们可以使用$.ajaxSetup来设置全局的error回调函数，以处理所有AJAX请求的错误。
ajax的20个参数AJAX的原理，使用，深入了解
ajax的20个参数AJAX的原理，使⽤，深⼊了解AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）⼀，ajax参数1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。
2.type:要求为String类型的参数，请求⽅式（post或get）默认为get。
注意其他http请求⽅法，例如put和delete也可以使⽤，但仅部分浏览器⽀持。
3.timeout:要求为Number类型的参数，设置请求超时时间（毫秒）。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
4.async:要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。
如果需要发送同步请求，请将此选项设置为false。
注意，同步请求将锁住浏览器，⽤户其他操作必须等待请求完成才可以执⾏。
5.cache:要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
6.data:要求为Object或String类型的参数，发送到服务器的数据。
如果已经不是字符串，将⾃动转换为字符串格式。
get请求中将附加在url后。
防⽌这种⾃动转换，可以查看 processData选项。
对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，JQuery将⾃动为不同值对应同⼀个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:要求为String类型的参数，预期服务器返回的数据类型。
如果不指定，JQuery将⾃动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
JQUERY AJAX异步操作详细说明AJAX 全称 Asynchronous JavaScript and XML（异步的 JavaScript 和XML）。
它并非一种新的技术，而是以下几种原有技术的结合体。
1)使用CSS和XHTML来表示。
2)使用DOM模型来交互和动态显示。
3)使用XMLHttpRequest来和服务器进行异步通信。
4)使用javascript来绑定和调用。
通过AJAX异步技术，可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Request)/应答(Response)模型：1)不需要用户等待服务端响应。
在异步派发XMLHttpRequest请求后控制权马上就被返回到浏览器。
界面不会出现白板，在得到服务器响应之前还可以友好的给出一个加载提示。
2)不需要重新加载整个页面。
为XMLHttpRequest注册一个回调函数，待服务器响应到达时，触发回调函数，并且传递所需的少量数据。
“按需取数据”也降低了服务器的压力。
3)不需要使用隐藏或内嵌的框架。
在XHR对象之前，模拟Ajax通信通常使用hack手段，如使用隐藏的或内嵌的框架(<iframe>标签)。
下面介绍下AJAX中的重要对象：XMLHttpRequest。
XMLHttpRequest对象(XHR)XMLHttpRequest是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或接收XML及其他数据的一套API。
XMLHttpRequest对象首次以ActiveX对象形式在微软Internet Explorer(IE) 5中以引入。
其他浏览器制造商在认识到这一对象重要性后也纷纷实现了XMLHttpRequest对象，但是以一个本地JavaScript对象而不是作为一个ActiveX 对象实现。
而如今，由于安全性、标准等问题，微软已经在其IE 7中把XMLHttpRequest实现为一个本地JavaScript对象。
API描述客服端请求open(method,url,a sync, bstrUser, bstrPassword)规定请求的类型、URL 以及是否异步处理请求。
1)method：请求的类型，例如：POST、GET、PUT及PROPFIND。
大小写不敏感。
2)url：请求的URL地址，可以为绝对地址也可以为相对地址。
3)async[可选]：true（默认，异步）或 false（同步）。
注释：当您使用async=false 时,JavaScript 会等到服务器响应就绪才继续执行。
如果服务器繁忙或缓慢，应用程序会挂起或停止。
此时，不需要编写onreadystatechange回调函数，把代码放到send() 语句后面即可。
4)bstrUser[可选]：如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
5)bstrPassword[可选]：验证信息中的密码部分，如果用户名为空，则此值将被忽略。
getRequestHeader(name)获取指定的相应头部信息setRequestHeader( name,value)自定义HTTP头部信息。
需在open()方法之后和send()之前调用，才能成功发送请求头部信息。
传送门：HTTP 头部详解Accept浏览器能够处理的媒体类型Accept-Charset浏览器申明自己接收的字符集Accept-Encoding浏览器申明自己接收的编码方法，通常指定压缩方法，是否支持压缩，支持什么压缩方法（gzip，deflate）Host客户端指定要请求的WEB服务器的域名/IP 地址和端口号Referer发出请求的页面的URIContent-Type标明发送或者接收的实体的MIME类型。
传送门：1、HTTP Content-type对照表2、格式：Content-Type:[type]/[subtype]; parameterX-Requested-With非标准HTTP头，只为firefox3标注是否为ajax异步请求，null表示为同步请求。
默认情况下，服务器对POST请求和提交Web表单不会一视同仁，将Content-Type头部信息设置为application/x-www-form-urlencoded (模拟表单提交)send(string)将请求发送到服务器。
参数string仅用于POST请求；对于GET请求的参数写在url后面，所以string参数传递null。
abort()调用此方法可取消异步请求，调用后，XHR对象停止触发事件，不允许访问任何与响应相关的属性；服务端响应onreadystatechang e事件对于异步请求，如果需要对服务器获取和操作响应结果，则在send() 之前，需要为onreadystatechange属性指定处理方法。
该函数用于对服务器响应进行处理。
readyState存有XMLHttpRequest的状态。
每当readyState改变时，就会触发onreadystatechange事件。
从 0 到 4 发生变化：0(未初始化)对象已建立，但是尚未初始化（尚未调用open方法）1(初始化)对象已建立，尚未调用send方法2(发送数据)send方法已调用，但是当前的状态及http头未知3(数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误4(完成)数据接收完毕,此时可以通过responseXml和responseText获取完整的回应数据status（数字表示）返回当前请求的http状态码。
传送门：HTTP状态码一览表（HTTP Status Code）1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。
2xx （成功）表示成功处理了请求的状态代码。
Eg：2003xx （重定向）表示要完成请求，需要进一步操作。
通常，这些状态代码用来重定向。
Eg：3044xx（请求错误）这些状态代码表示请求可能出错，导致服务器无法正常处理。
Eg：4045xx（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。
这些错误可能是服务器本身的错误，而不是请求出错。
Eg：500statusText（字符表示）返回当前请求的状态文本eg：OK （status：200）responseText将响应信息作为字符串返回responseXML将响应信息格式化为Xml Document对象并返回responseBody（只有微软的IE支持）将响应信息正文以unsigned byte数组形式返回(二进制数据)responseStream（只有IE的某些版本支持）以Ado Stream对象(二进制流)的形式返回响应信息getResponseHeader(name)从响应信息中获取指定的http头getAllResponseHeaders()获取响应的所有http头overrideMimeType通常用于重写服务器响应的MIME类型。
Eg，正常情况下XMLHttpRequest只接收文本数据，但我们可以重写MIME为“text/plain; charset=x-user-defined”，以欺骗浏览器避免浏览器格式化服务器返回的数据，以实现接收二进制数据。
XMLHttpRequest Level 2XMLHttpRequest是一个浏览器接口，使得Javascript可以进行 HTTP (S) 通信。
但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。
HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。
2008年 2 月，提出了XMLHttpRequest Level 2 草案。
1.老版本的缺点老版本的XMLHttpRequest对象有以下几个缺点：1)只支持文本数据的传送，无法用来读取和上传二进制文件。
2)传送和接收数据时，没有进度信息，只能提示有没有完成。
3)受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据。
2.新版本的功能新版本的XMLHttpRequest对象，针对老版本的缺点，做出了大幅改进。
1)可以设置 HTTP 请求的时限。
2)可以使用FormData对象管理表单数据。
3)可以上传文件。
4)可以请求不同域名下的数据（跨域资源共享，Cross-origin resourcesharing，简称 CORS）。
5)可以获取服务器端的二进制数据。
6)可以获得数据传输的进度信息。
3.介绍几个XMLHttpRequest Leve2 新增的成员超时时限timeout设置ajax请求超时时限，过了这个时限，就自动停止HTTP请求。
ontimeout事件当ajax超过timeout 时限时触发的回调函数。
指定响应格式responseType(默认：“text”)在发送请求前，根据您的数据需要，将xhr.responseType设置为“text”、“arraybuffer”、“blob”或“document”。
response成功发送请求后，xhr的响应属性会包含DOMString、ArrayBuffer、Blob 或Document 形式（具体取决于responseTyp的设置）的请求数据。
进度信息progress 事件在XMLHttpRequest对象传递数据的时候用来返回进度信息。
它分成上传和下载两种情况。
下载的 progress 事件属于XMLHttpRequest对象，上传的 progress 事件属于XMLHttpRequest.upload 对象。
即：xhr.onprogress = updateProgress;xhr.upload.onprogress = updateProgress;XHR 还新增了与progress 事件相关的五个事件：1) load 事件：传输成功完成。
2) abort 事件：传输被用户取消。
3) error 事件：传输中出现错误。
4) loadstart 事件：传输开始。
5) loadEnd 事件：传输结束，但是不知道成功还是失败。
4. 一个新功能实例1) 接收二进制数据（方法A ：改写MIMEType ）老版本的XMLHttpRequest 对象，只能从服务器取回文本数据。
但我们可以改写数据的MIMEType ，将服务器返回的二进制数据伪装成文本数据，并且告诉浏览器这是用户自定义的字符集。
关键代码如下：服务端?1 2 3 4 5 6 7 8 9 10 11String str ="二进制数据获取"; MemoryStream _memory =new MemoryStream(); BinaryFormatter formatter =new BinaryFormatter(); formatter.Serialize(_memory, str); _memory.Position = 0; byte [] read =new byte [_memory.Length]; _memory.Read(read, 0, read.Length); _memory.Close(); context.Response.ContentType ="text/plain"; // 服务器使用OutputStream 输出二进制流 context.Response.OutputStream.Write(read, 0, read.Length); 客服端?1 2 3 4 5 6 7 8 9 10 $('#btn_mime').bind('click',null,function () {$.ajax('AjaxHandler.ashx?func=GetBinaryData',{type:'get',dataType:'text',cache:false ,mimeType:'text/plain; charset=x-user-defined',success:function (data) {if (data) {var byte = [];1 1 12 13 14 15 16 17 18 19 2 0for (var i = 0, len = data.length; i < len; ++i) { var c = data.charCodeAt(i);byte[byte.length] = c & 0xff;}alert(byte);}}});});浏览器会把相应数据当做文本数据接收，所以我们还必须再一个个字节地还原成二进制数据。