采用Ajax整合表单数据进行提交给Servlet后台代码、可以完成同步或者异步操作。
以下中，并没有去声明同步或者异步。该属性为async，默认值为true[异步].
那么需要注意的是同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
通俗来说，同步操作会导致步骤内容具有阻塞性的操作
1. 初级版_未采用ajax
1.1 页面代码 ：
<form action="/bookServlet" method="post"> 图书名称： <input type="text" name="bookName" /> 图书价格： <input type="text" name="bookPrice" /> <input type="submit" value="添加图书" /> </form>
1.2 Servlet代码 ：
package cn.javabs.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 基于IDEA | 采用 Servlet3.0注解方式、即代表不需要再写web.xml * @author Mryang */ @WebServlet("/bookServlet") public class BookServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求编码 request.setCharacterEncoding("utf-8"); // 设置响应编码 response.setCharacterEncoding("utf-8"); // 设置响应内容类型 response.setContentType("text/html;charset=utf-8"); // 获取请求参数 String bookName = request.getParameter("bookName"); String bookPrice = request.getParameter("bookPrice"); // 输出请求参数 System.out.println("您输入的内容是:"+bookName+":"+bookPrice); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 调用dopost方法、达到代码复用 this.doPost( request, response); } }
2. 中级版_采用ajax
2.1 页面代码:
<!--引入JQuery插件--> <script src="js/jquery-1.7.2.min.js"></script> <form> 图书的名称： <input type="text" name="bookName" id="bookName" /> 图书的价格： <input type="text" name="bookPrice" id="bookPrice" /> <button id="btn">图书添加</button> </form> <script> $(function () { // 获取按钮元素| 当被单击会触发匿名函数 $("#btn").click(function () { // 接收客户端用户输入的值 var bookName = $('#bookName').val()； var bookPrice = $('#bookPrice').val()； // 调用JQuery中的 .ajax()方法【url表示传递数据到哪里的地址、type表示传递方式的选择、data表示传递的参数、success和error表示回调函数】 $.ajax({ url:"/bookServlet",// 替换掉form表单中的action属性值 type:"POST",//替换掉form表单中的method属性值 data:{'bookName':bookName,'bookPrice':bookPrice},//传递的两项参数 success:function (data) {// 成功时自动调取的回调函数 alert(data); }, error:function (data) {// 失败时自动调取的回调函数 alert(data); } }); }); }); </script>
2.2 Servlet代码
package cn.javabs.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 基于IDEA | 采用 Servlet3.0注解方式、即代表不需要再写web.xml * @author Mryang */ @WebServlet("/bookServlet") public class BookServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求编码 request.setCharacterEncoding("utf-8"); // 设置响应编码 response.setCharacterEncoding("utf-8"); // 设置响应内容类型 response.setContentType("text/html;charset=utf-8"); // 获取请求参数 String bookName = request.getParameter("bookName"); String bookPrice = request.getParameter("bookPrice"); // 输出请求参数 System.out.println("您输入的内容是:"+bookName+":"+bookPrice); // 响应内容传递数据给Ajax的回调函数data response.getWriter().write("我收到数据了！给你看一下："+bookName+":"+bookPrice); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 调用dopost方法、达到代码复用 this.doPost( request, response); } }
3. 高级版_采用ajax
3.1 页面代码:
<!--引入JQuery插件--> <script src="js/jquery-1.7.2.min.js"></script> <form> 图书的名称： <input type="text" name="bookName" id="bookName" /> 图书的价格： <input type="text" name="bookPrice" id="bookPrice" /> <button id="btn">图书添加</button> </form> <script> $(function () { // 获取按钮元素| 当被单击会触发匿名函数 $("#btn").click(function () { // 调用JQuery中的 .ajax()方法【url表示传递数据到哪里的地址、type表示传递方式的选择、data表示传递的参数、success和error表示回调函数】 $.ajax({ url:"/bookServlet",// 替换掉form表单中的action属性值 type:"POST",//替换掉form表单中的method属性值 // serialize()：是可以将整个表单的数据转成URL的字符串格式{注：意味着将整个表单进行了提交、不再像中级版一个参数一个参数提交了} data: $("#myform").serialize(),//给表单设置一个id较做myform |serialize()方法是将整个表单进行了序列化操作 success:function (data) {// 成功时自动调取的回调函数 alert(data); }, error:function (data) {// 失败时自动调取的回调函数 alert(data); } }); }); }); </script>
3.2 Servlet代码
package cn.javabs.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 基于IDEA | 采用 Servlet3.0注解方式、即代表不需要再写web.xml * @author Mryang */ @WebServlet("/bookServlet") public class BookServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置请求编码 request.setCharacterEncoding("utf-8"); // 设置响应编码 response.setCharacterEncoding("utf-8"); // 设置响应内容类型 response.setContentType("text/html;charset=utf-8"); // 获取请求参数 String bookName = request.getParameter("bookName"); String bookPrice = request.getParameter("bookPrice"); // 输出请求参数 System.out.println("您输入的内容是:"+bookName+":"+bookPrice); // 响应内容传递数据给Ajax的回调函数data response.getWriter().write("我收到数据了！给你看一下："+bookName+":"+bookPrice); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 调用dopost方法、达到代码复用 this.doPost( request, response); } }
分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。
