杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]

本是古典何须时尚 2022-01-26 11:55 180阅读 0赞

> 采用Ajax整合表单数据进行提交给Servlet后台代码、可以完成同步或者异步操作。
> 
> 以下中，并没有去声明同步或者异步。该属性为async，默认值为true\[异步\].
> 
> 那么需要注意的是同步请求将**锁住**浏览器，用户其它操作**必须等待请求完成**才可以执行。
> 
> 通俗来说，同步操作会导致步骤内容具有**阻塞性**的操作

**目录**

1. 初级版\_未采用ajax

1.1 页面代码 ：

1.2 Servlet代码 ：

2. 中级版\_采用ajax

2.1 页面代码:

2.2 Servlet代码

3. 高级版\_采用ajax

3.1 页面代码:

3.2 Servlet代码

--------------------

## 1. 初级版\_未采用ajax ##

### 1.1 页面代码 ： ###

### 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 页面代码: ###

<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 页面代码: ###

<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);
        }
    }

![20190529004544846.gif][]

作者： 杨校

出处： https://mryang.blog.csdn.net

Java互联网交流学习群：827829292

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。

## ##

[20190529004544846.gif]: /images/20220126/f9c054399a744171a70750d430a76592.png