AJAX请求和响应

本文总结AJAX请求和响应的相关经验

AJAXAsynchronous JavaScript and XML,异步JS和XML,即在不重载整个页面的情况下,AJAX通过后台加载数据,并在网页上展示。使用jQuery + AJAX可以使用简单的Java方法实现发送请求和接受响应,响应格式为JSON、HTML或XML的String。

1. 请求静态内容:$(selector).load(URL,data,callback(responseTxt,statusTxt,xhr));

URL

必需

请求的url

Data

可选

与请求一起发送的查询参数

Callback

可选

执行完成后的回调函数

responseTxt

可选

包含调用成功时的结果内容

statusTxt

可选

包含调用状态

xhr

可选

XMLHttpRequest对象

2. GET/POST方法

GET方法:向指定的资源请求数据,基本上用于从服务器获得(取回)数据,可返回缓存数据。$.get(URL,callback());

POST方法:向指定的资源提交要处理的数据,不会返回缓存数据。$.post(URL,callback());

请求的data可以这么写:

{

Key1:”value1”,

Key2:”value2”,

……

KeyN:”valueN”

}

回调函数callback(data,status)中,data是返回的数据,status是网络响应状态。

3. $.ajax方法

这个方法比前两个方法都好,都灵活,是jQuery封装的AJAX方法,一般AJAX底层需要定义一个XMLHttpRequest对象,通过这个对象的方法来进行AJAX请求和处理响应。但是$.ajax方法(以及前两个方法)可以把这个对象的操作封装起来,减少代码量。

几个注意的地方:

@ResponseBody的使用

用来标注Controller的某个方法,用来处理ajax请求,和@RequestMapping一起使用,@ResponseBody使这个方法返回后,Http请求不去找ModelView更新数据,而是直接把返回值作为响应发给$.ajax方法回调函数的参数。这个参数可以是Object,但最好是String类型,格式最好是Text,Html,XmlJSON的序列化字串,省去不必要的麻烦。、

脚本创建新元素(动态元素)的事件绑定

较新版本的jQuery不支持.live()!!!

较新版本的jQuery不支持.live()!!!

较新版本的jQuery不支持.live()!!!

W3SCHOOL上的教程没有更新,现在所有绑定未来元素的方法都建议使用.on(),而且!!!

在绑定动态元素的时候,元素选择器不能直接选择未来的元素id(或者类、名称),而是应该写成$(document).on(“事件”,$selector,function(){}),在编译的时候还没有这个元素呢,只能绑定他的祖先节点(其实绑定父节点也可以,不过还是按规定写吧)。这就好比,一个爸爸在还没有孩子的时候,他的哥们儿不能直接找到他还没出生的孩子说:叫我叔叔,而只能盯着这个爸爸,他啥时候有孩子了,让他的孩子叫叔叔。

响应中文乱码问题

总结一下AJAX的中文乱码问题。分为几种情况:

1. 前端页面显示结果的时候出现乱码(V端)

查看页面编码格式,这个问题一般不会出现,配置的时候就统一了。

2. 请求的过程中到C端,参数为乱码(4有一种相同情况,一定要看!

<!-- AJAX请求编码器 -->
<beanclass="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<propertyname="messageConverters">
<list>
<beanclass="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/>
<beanclass="org.springframework.http.converter.StringHttpMessageConverter">
<propertyname="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>
</
bean>

以及:

<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<async-supported>true</async-supported>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>

加入相应配置文件即可。

3. 到数据库里变乱码/数据库提取出来乱码

数据库配置url后面加上:?useUnicode=true&characterEncoding=UTF-8

4. C端响应到V端变乱码

如果你配置完前面3个,那么M-V-C-Db都统一成UTF-8了,但是还是乱码,有可能是因为你在传递参数的时候直接在IDE里写了一个中文参数,如:

$.post(url,{name:”张三”});

由于你编辑器自身的编码格式不是UTF-8,在存储、编译、运行的过程中这个字符串已经变成乱码了。解决方法就是把编辑器的编码格式改一下。实际开发过程中,基本不会使用到静态的中文字符串,有的也可以尽量改成英文的,都不会遇到这种问题。

如果!!!这样还不行,那你可以尝试吧这个静态字符串封装到另一个类里,比如封装到JSON或者XML里,序列化成字符串后返回到前端,前端再反序列化,得出来相应域的值就是正确的中文字串。

如果这样还不行,大兄弟,赶紧别纠结了,这不是考试,尝试一下别的方法吧。软件的构建过程很复杂,有可能在构建或者调试的某一时刻,你改了一下,就会有一部分是UTF-8,另一部分不是(这两部分之间的交互没有中文参数不会报错),而你的请求正好从这两部分中穿过,这个角落很有可能是永远找不到的。

AJAX请求和响应的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 前端监听websocket消息并实时弹出(实例代码)

    这篇文章主要介绍了前端监听websocket消息并实时弹出,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  6. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  8. ios – 加载空白页面的SFSafariViewController

    我正在使用SFSafariViewController在我的iOS应用程序中打开一个URL..它在iOS9上完美运行但在将我的设备更新到iOS10后,它只是在地址栏中加载了一个没有URL的空白页面.甚至safariViewController(控制器:SFSafariViewController,didCompleteInitialLoaddidLoadSuccessfully:Bool)在控制器

  9. ios – 应用更新,NSURL和文档目录

    我应该存储相对图像网址或字符串来表示这些资源的位置,还是应该可以存储最终成为绝对网址的内容?

  10. ios – 从Facebook这样的任何URL获取特定图像

    我的问题看起来可能与其他问题类似,但事实并非如此.(据我所知).我无法理解如何从任何URL获取特定图像像Facebook一样,我无法向您显示屏幕截图,因为我没有真正的设备.但我可以告诉你Skype的屏幕截图来自MAC.任何帮助将不胜感激.thanks.编辑:我使用这个link获得了favicon,但它非常小我想要更大的尺寸.解决方法最后,我得到了答案.这可能对你有帮助,这就是为什么我发布这个答案.

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github,点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件;对于前后端分离的开发模式,ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装,XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js,更小的压缩版本,可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装,VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js,更小的压缩版本,可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多,其中一个是利用CORS,而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的,最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止,相当于仅仅完成了预检,还没发送真正的请求呢。

  5. form提交时,ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案:1.加cache:false2.url加随机数正常代码:网上高人解读:cache的作用就是第一次请求完毕之后,如果再次去请求,可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下,内容编码类型满足大多数情况。在这里,我们主要谈谈contentType=false.在使用ajax上传文件时:在其中先封装了一个formData对象,然后使用post方法将文件传给服务器。说到这,我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗?这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的,因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来,以后不用到处找了。语法:$.ajaxFileUploadoptions参数说明:1、url上传处理程序地址。2,fileElementId需要上传的文件域的ID,即的ID。3,secureuri是否启用安全提交,默认为false。4,dataType服务器返回的数据类型。6,error

  9. AJAX-Cache:一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段,在频繁的异步请求业务中,我们往往需要利用“缓存”提升界面响应速度,减少网络资源占用。AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的,我该如何解决呢?必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位,那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部