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

杨校

发布于 2019-06-14 21:12:14

1.8K0

发布于 2019-06-14 21:12:14

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019年05月29日，如有侵权请联系 cloudcommunity@tencent.com 删除

servlet

java

ajax

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

servlet

java

ajax

登录后参与评论

0 条评论

热度

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

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

1. 初级版_未采用ajax

1.1 页面代码：

1.2 Servlet代码：

2. 中级版_采用ajax

2.1 页面代码:

2.2 Servlet代码

3. 高级版_采用ajax

3.1 页面代码:

3.2 Servlet代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

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

1. 初级版_未采用ajax

1.1 页面代码 ：

1.2 Servlet代码 ：

2. 中级版_采用ajax

2.1 页面代码:

2.2 Servlet代码

3. 高级版_采用ajax

3.1 页面代码:

3.2 Servlet代码

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1.1 页面代码：

1.2 Servlet代码：