前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]

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

作者头像
杨校
发布2019-06-14 21:12:14
1.8K0
发布2019-06-14 21:12:14
举报
文章被收录于专栏:Java技术分享圈

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

代码语言:javascript
复制
<form action="/bookServlet" method="post">
    图书名称:  <input type="text" name="bookName"   />
    图书价格:  <input type="text" name="bookPrice"  />
    <input type="submit" value="添加图书" />
</form>

1.2 Servlet代码 :

代码语言:javascript
复制
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 页面代码:

代码语言:javascript
复制
<!--引入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代码

代码语言:javascript
复制
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 页面代码:

代码语言:javascript
复制
<!--引入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代码

代码语言:javascript
复制
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 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 初级版_未采用ajax
    • 1.1 页面代码 :
      • 1.2 Servlet代码 :
      • 2. 中级版_采用ajax
        • 2.1 页面代码:
          • 2.2 Servlet代码
          • 3. 高级版_采用ajax
            • 3.1 页面代码:
              • 3.2 Servlet代码
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档