jquery关于ajax那些事 2020年06月28日 未雨晴空 1评论 481阅读 2喜欢 阅读模式 隐藏边栏 显示边栏 >前言 最近在公司做项目时,前端ajax交互用到的比较多,才发现自己对ajax一知半解,好多概念还没有搞清楚,故整理该篇文章以待日后翻阅。 ## 常用的ajax请求方式 * $.ajax({name:value, name:value, ... }) >只有一个参数且该参数是一组**key/value**对象,包含各选项及回调函数信息。 ```javascript $.ajax({ type: "post", url: 'http://www.example.com/user/query', data:{username:"zhangsan"}, success: function (data) {console.log(data);} }); ``` * $.get(url,data,function(data,status,xhr),dataType) | 参数 | 描述 | |--|--| | url |必需。请求URL。 | | data |可选。请求数据。 | |success|可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){...},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象| |dataType|可选。预期的服务器响应的数据类型。默认jQuery 会根据请求响应头智能判断| ```javascript $.get( "http://www.example.com/user/query", {username: "zhangsan"}, function(data){ alert(data); } ); ``` * $.post(url,data,function(data,status,xhr),dataType) | 参数 | 描述 | |--|--| | url |必需。请求URL。 | | data |可选。请求数据。 | |success|可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){...},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象| ```javascript $.post( "http://www.example.com/user/query", {username: "zhangsan"}, function(data){ alert(data); } }) ``` * $.getJSON(url,data,success(data,status,xhr)) | 参数 | 描述 | |--|--| | url |必需。请求URL。 | | data |可选。请求数据。 | |success|可选。当请求成功时运行的函数;函数形式:function(data,status,xhr){...},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象| ```javascript $.getJSON( "http://www.example.com/user/query?username=zhangsan", function(data){ console.log(data); } ); ``` ## ajax请求简单参数解释 | 参数 | 描述 | |--|--| |url | 请求地址 | | type | 请求类型,默认get | | timeout | 请求超时时间 | | async | 是否异步请求,默认为true | | cache | 是否从缓存中加载请求信息,默认为true | | dataFilter |该参数是对ajax返回的原始数据进行预处理,提供data和type两个参数。data是Ajax返回的原始数据,type则是dataType参数。 | | beforeSend | 发送请求前运行的函数,函数形式:function(data,status,xhr){...},其中参数data表示服务器返回的数据;status表示请求的状态;xhr表示XMLHttpRequest 对象。若函数返回false可以取消本次ajax请求| | success | 当请求成功时运行的函数,函数形式同上面的beforeSend | |error | 如果请求失败要运行的函数,函数形式同上面的beforeSend| | complete | 请求完成时运行的函数(在请求成功或失败之后均调用),函数形式同上面的beforeSend | | ifModified | 若为true则表示仅在服务器数据改变时获取新数据。默认为false,即忽略头信息。服务器数据改变判断的依据是Last-Modified头信息 | |username | 要求为String类型的参数,用于响应HTTP访问认证请求的用户名 | | password | 要求为String类型的参数,用于响应HTTP访问认证请求的密码 | | scriptCharset| 规定请求的字符集。 | | jsonp| 在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分。 | | global | 表示是否触发全局ajax事件,要求为Boolean类型的参数,默认为true | ## ajax请求重要参数解释 * data >Object或String类型的参数,发送到服务器的数据。**如果不是字符串,将自动转换为字符串格式**。 get请求中会将参数序列化附加在url后。例如{username:"jack",age:"18"}转换为&username=jack&age=18附加在请求url后面。如果需要防止这种自动转换,可以设置processData(防止自动转换)为false。 * dataType >这个是**预期服务器返回的数据类型**,而不是你发送给服务器的数据类型。如果不指定,jquery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下: >* xml:返回XML文档 > * html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。 > * script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。 > * json:返回JSON数据。 > * jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。 > * text:返回纯文本字符串。 * contentType: >内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。 * processData: >默认为true的情况下,发送的数据将被转换为对象(即`&username=jack&age=18`这样的形式),以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。processData 默认为true,当设置为false的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data ## ajax请求头添加Content-Type的两种方式 * 方式一 ```javascript $.ajax({ type: "post", url: 'http://www.example.com/user/query', data:{username:"zhangsan"}, contentType:"application/json", success: function (data) {console.log(data);} } }); ``` * 方式二: ```javascript $.ajax({ type: "post", url: 'http://www.example.com/user/query', data:{username:"zhangsan"}, beforeSend:function (xhr) { xhr.setRequestHeader("Content-Type", "application/json"); }, success: function (data) {console.log(data);} } ``` ## application/x-www-form-urlencoded 和 application/json 两种类型的数据的区别 >ajax 请求默认使用contentType等于`"application/x-www-form-urlencoded"`这种格式的特点就是如果你的请求数据是简单的json对象类型如`data:{username:"zhangsan",age:18}`则也会被ajax会序列化成`user=张三&age=18` 这种形式发送到服务端,需要注意一点这种转换时只能识别json对象类型,不能识别json字符串类型,**如果是get请求则附在在请求url后面**, **而 post 请求则是使用请求体,参数不在请求url 中**,在请求体中的参数表现形式也是 `user=zhangsan&age=18` 的形式。 >当contentType等于`"application/json"`时,这表示发送的数据是json格式的字符串,如果ajax中设置为该类型,则发送的json对象必须要使用`JSON.stringify`进行序列化成字符串才能和设定的这个类型匹配。 ## Spring如何接收ajax传递的数据 当`contentType`没有设置即表示采用ajax默认的`"application/x-www-form-urlencoded"`,后台可通过以下方式获取参数 * 原生的Servlet使用request.getParameter(“user”)获取参数; * spring mvc中框架可自动根据参数名进行匹配,即表单元素的name属性和接收参数的名称一样时即可自动匹配;如果不一样,还可以使用@RequestParam,@ModelAttribute以及@RequestBody 的方式匹配。 当`contentType`设置成即`"application/json"`,后台可通过以下方式获取参数 * 需要使用@RequestBody来注解,这样才能将发送过来的json字符串解析绑定到对应的 pojo 属性上。另外,需注意一点,json字符串在书写时名称部分需要加上“”双引号,以免一些json解析器无法识别。 ## ajax如何传递multipart/form-data类型数据 >解决这个问题需要用到FormData,该对象用以将数据编译成键值对的形式来发送数据。一般都是用于发送表单数据,但也可以用于手动构造键值对数据,而独立于表单使用。 ```javascript var avatar=$("input[type='file']")[0]; var formData = new FormData(); formData.append("username", "zhangsan"); formData.append("password",123456789); formData.append("avatar", avatar.files[0]); $.ajax({ url:'http://www.example.com/user/avatar/upload/', dataType:'json', type:'POST', data: formData, processData : false, // 关闭默认的数据处理即不做处理 contentType : false, // 不要默认设置Content-Type请求头 success: function(data){ console.log(data); }, error:function(response){ console.log(response); } }); ``` ## ajax请求数据中文编码问题 如果你是通过form提交的,那就不需要对参数进行编码,但是如果是由ajax发送请求到后台的,就需要对参数进行encodeURI编码,否则,会导致后台出现各种乱码。 * url中参数处理 >如果参数是通过URL传递那么需要编码两次;第一次编码是对中文进行编码;第二次是对转码后的%进行编码处理; ```javascript //encodeURI("张三")="%E5%BC%A0%E4%B8%89"`; //encodeURI("%E5%BC%A0%E4%B8%89")="%25E5%25BC%25A0%25E4%25B8%2589" var username=encodeURI(encodeURI("张三")) $.ajax({ type: "get", url: 'http://www.example.com/user/query?username='+username, success: function (data) {console.log(data);} } }); ``` * 请求体中参数处理 >如果是请求体中含有中文参数,那么只需要编码一次即可。 ```javascript $.ajax({ type: "get", url: 'http://www.example.com/user/query', data:{username:encodeURI("张三")} success: function (data) {console.log(data);} } }); ``` 是那么后台在获取到参数需要通过`URLDecoder.decode(username,"utf-8");`进行解码即可。 © 著作权归作者所有,欢迎转载,转载请说明出处:未雨晴空博客,谢谢理解! 喜欢 打赏 分享 上一篇 下一篇 linjj1020 2020-06-30 23:06:45 66666666666666666 回复 发表评论 取消回复 电子邮件地址不会被公开。 表情 请输入以http或https开头的URL,格式如:https://oneisall.top 提交评论
66666666666666666
回复