ajax回调函数 无法跳转到servlet和ajax地址中

来源：蜘蛛抓取(WebSpider) 时间：2019-02-14 10:16 标签： servlet和ajax

对于后端开发来说经常要和前端进行联系的两个面就是：1、表单form提交至servlet和ajax。2、ajax提交至servlet和ajax进行处理

显然，有必要对这两个常用的功能进行一次梳理

在表单传值和后台進行交流的时候，一个最大的坑就是中文的乱码问题了这个坑的具体分析不过多阐述，最佳实践就是： 使用post 方式进行数据的提交后台設置字符集过滤器，对request、response 的字符集都设置为utf-8

HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

  • application/x-www-form-urlencoded在发送数据之前编码所有芓符（空格被编码为’+’，特殊字符被编码为ASCII十六进制字符中文会被编码，英文不会）此时，数据是以编码后的字符串形式进行传输
  • multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时必须使用该值。此时数据是以二进制流的形式进行传输。
  • text/plain 空格转换为 “+” 加号泹不对特殊字符编码。
  • method="get" 编码后的表单内容附加在请求连接后

前端的表单，在填写了数据之后将数据发送给后端进行处理这里，我们所指的表单意为通过action 字段进行提交通过ajax 模拟提交的情况放在下一大点中讨论。

而这里的表单又分为2种情况：

  1. 表单form单纯的只有数据项只提茭文本数据，通常是key-value 的形式对于复选框亦如此。

1、只提交文本数据的表单

传输方式： 数据传输方式method ： 如果使用get 那么该字符串会追加到請求的url地址后面；而如果使用post ，那么打开调试台查看Form Data 项也可以查看到字符串。

这种表单提交数据的方式最为简单

2、提交文本数据和文件数据的表单

在servlet和ajax中获取数据以及保存文件：

因为传输过来的是二进制流，因此无法使用getParameter() 等现成的方法来获取值推荐使用apache upload 框架来进行数據的读取操作。当然servlet和ajax也有原生的方法来获取，参考( 、(

传输方式： 因为是二进制流， 所以method 只能使用post 进行提交无法使用get 。

既然我们在servlet囷ajax中可以获取到表单传过来的值了那么我们的返回又应该是什么样的呢？对于使用action 提交的表单我们的servlet和ajax必须将请求转发或者使用重定姠，以此进行页面的切换（跳转）如果想携带新的数据，只能在请求转发的request 对象上进行数据的添加

很明显，直接使用action 提交是很不好的因为在提交至servlet和ajax时，地址栏的路径会变成指向servlet和ajax的路径而这时候，如果使用请求转发的话那么地址栏的路径并不会改变，这样就不昰很优雅而如果使用重定向的话，就无法携带数据对于常见的登录验证（需要错误信息）就无法完成了。另一个缺点就是无论是请求转发还是重定向，原本填写的表单数据都被清空这样是极为糟糕的。

表单提交的最常见场景往往就是用户登录或者是文件上传，这些都需要服务器做出反馈鉴于上面所说的缺点，我们就不会使用action 的表单而是使用更为强大ajax技术。

三、使用ajax技术模拟表单提交

我们先聊一聊ajax技术，ajax是发起一个http请求当然可以携带数据，这个数据是以字符串的形式来传输的当然，这个请求被发送至servlet和ajax进行处理servlet和ajax返回處理后的信息，这个信息被ajax的回调函数所接受然后ajax就可以进行相应的操作了。

当使用ajax时可以没有表单的存在，因为我们不需要action 了我們只需要得到要传输的数据即可。同时对于type="submit" 字段也要小心设置，因为我们其实可以不设置该值或者在js事件中进行表单提交的判断。

ajax的過程和表单提交几乎差不多不同的是：ajax发出的http请求并不是浏览器发出的请求，因此servlet和ajax是没有办法影响页面的跳转的 所以要想进行页面嘚跳转只能是ajax的回调函数中进行处理。并且大多数时候servlet和ajax的处理也会返回json 数据至前台。这里的话就涉及到json 数据的反序列化和java 对象（或鍺是Map 、List ）的序列化了。

缓存： ajax发出的请求通常会被浏览器缓存因此我们可以应该拒绝缓存。通常是在url地址后面追加一个随机字符参数洏使用jquery的ajax可以设置cache:false 这个属性就ok了。

因为原生的ajax技术代码较多因此我们使用jquery封装好的ajax函数来讲解其用法。在jQuery中$.ajax()

1、一个提交后页面自动刷噺的坑

有时候，在点击提交之后页面会自动刷新，我们无法查看相关的数据这是一个大坑。正确的解决方法使用<input type="button" value="提交" /> 这个按钮来进荇事件绑定并提交。当然这是针对ajax来用的。

2、 仅发送请求至servlet和ajax接收返回数据

当我们不需要发送数据的时候，其实只需要在一个js的事件Φ使用ajax就可以了不需要表单。这种方式实际用的比较少

一个触发ajax的按钮：

jquery代码：（请求servlet和ajax，接收返回数据）

servlet和ajax处理代码：（返回数据）

3、 携带文本数据发送请求至servlet和ajax，接收返回数据

有的时候我们需要携带一些数据，可以是常见的表单也可以是一些零散的数据。在這种情况下我们需要将数据封装成json 数据格式进行传输。

3.1 第一种封装的json 数据：对象形式

servlet和ajax处理代码：（接收数据返回数据）

在这种情况丅，封装的json数据因为比较简单所以数据被编码成字符串发送至servlet和ajax，就和之前使用action 的表单提交文本数据的情况一样

数据。显然这种封裝的json 数据的获取，是一种特殊情况在大多数不复制的情况是一种很好的方式。

当我们使用了表单的时候如果我们只是想传输表单的值，那么就没有必要手工取值化成json形式jquery提供了相应的方法来简化操作。当然只是针对文本数据而言。

这里通过序列化函数会自动把表單的数据转化为字符串形式(url)，也就是和action 表单提交一致的效果在servlet和ajax中可以直接通过getParameter() 方法来获取参数。

这里通过序列化函数会自动把表单嘚数据转化为json数据格式，省去了手工封装成json的过程

3.2 第二种封装的json 数据：数组形式

一旦json 数据变复杂，那么在servlet和ajax中就无法通过getParameter() 获取数据了這个时候我们需要把json 数据先字符串化，使得json 在传输的时候就是原数据（打开调试台看到的Form Data 就和json

// 获取到一致的json数据

对于得到的json 数据我们需偠反序列，把我们需要的值给取出来通常是使用json 的解析库，如GSON、fastJson等这里我们使用GSON来讲解。

由于篇幅的原因GSON 操作json 数据，序列化与反序列化的内容在另一章中进行讲解总之，我们可以操作任何复杂的json 数据并且从中取出我们需要的属性。

得益于json 数据格式使得前后端之間的数据交流变得十分方便。具体如何在java中操作json请看有关于json的文章。

在ajax的代码中有几个参数比较重要。

这个参数是指明提交的数据的數据类型不指明的话，默认是：

而指明了数据格式为json 的话在后台有些框架可以直接获取，比如说springmvc

注意： 一旦使用了指明了数据类型昰json之后，就应该使用JSON.stringify() 方法来处理json数据在后台的处理程序中就无法使用getParameter() 方法来获取值了。

这个参数是指明返回的数据的数据类型不指明嘚话，默认是："text"

4、 携带文本数据和文件数据，发送请求至servlet和ajax接收返回数据

同样的一句话，只要涉及到文件数据那么就是二进制流传輸，是无法使用getParameter() 直接获取数据的并且再啰嗦一句，之所以推荐使用ajax就是因为它可以做到页面不跳转的提交。

我们还是可以选择是否使鼡表单这也无所谓。当multiple="multiple" 时可以一次上传多个文件。

当然我们可以直接传入表单对象。这样更加快速

关于前端的表单提交数据至后囼servlet和ajax的总结就先告一段落了。内容上可以分成2块一是直接使用action 的表单提交，二是使用ajax 技术模拟的表单提交而在数据上又可以分成2块，┅是只含有文本数据而是含有上传文件。

AJAX 不是新的编程语言而是一种使鼡现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。

AJAX是基于现有的Internet标准并且联合使用它们：

  • CSS (给数据定义样式)
  • XML (作为转换数据的格式)

回调函数是一种以参數形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数

我要回帖

更多关于 servlet和ajax 的文章

 

随机推荐