jQuery异步提交表单实例


Posted in jQuery onMay 30, 2017

前言:

我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下:

前提准备:引入脚本

<!--jquery需要引入的文件-->
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <!--ajax提交表单需要引入jquery.form.js-->
  <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>

前台页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <base href="<%=basePath%>" rel="external nofollow" >
  <title>Title</title>
  <!--jquery需要引入的文件-->
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
  <!--ajax提交表单需要引入jquery.form.js-->
  <script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
  <script>
    $(function () {
      //给id为ajaxSubmit的按钮提交表单
      $("#ajaxSubmit").on("click",function () {
        //alert(1);
        $("#ajaxForm").ajaxSubmit({
          beforeSubmit:function () {
            // alert("我在提交表单之前被调用!");
          },
          success:function (data) {
            //alert("我在提交表单成功之后被调用");
            if (typeof(data) == "string"){
              data = eval( '('+data+')');
              //alert(data); object
               handle(data);
            }else{
              handle(data);
            }
          }
        });
      });
    });
    //处理返回数据
    function handle(data){
      if(data.status == 200){
        alert(data.message);
        //处理逻辑
      }else{
        alert(data.message);
        //处理逻辑
      }
    }
  </script>
</head>
<body>
<form method="post" action="testAjax" id="ajaxForm">
  姓名:<input type="text" name="name"/><br>
  年龄:<input type="text" name="age"><br>
  性别:男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
  <br><br><br>
  <input type="submit" value="同步提交"/>   <input type="reset" value="重置" />
  <br> <br> <br>
  <input type="button" value="点我ajax提交表单" id="ajaxSubmit"/>  
</form>
</body>
</html>

后台servlet代码:

package cn.cupcat.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestAJAXContorller extends HttpServlet{
  /**
   * 
   */
  private static final long serialVersionUID = 1L;
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    System.out.println("进入了doGet方法!");
    //调用都doPost方法,get和post做同样处理
    doPost(req, resp);
  }
  @Override
  protected void doPost(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    System.out.println("进入了doPost方法!");
    //设置请求编码
    req.setCharacterEncoding("UTF-8");
    //设置响应编码
    resp.setCharacterEncoding("UTF-8");
    //得到表单中的name
    String name = req.getParameter("name");
    //得到表单中的age
    String age = req.getParameter("age");
    //得到表单中的sex
    String sex = req.getParameter("sex");
    //输出打印
    System.out.println("name = "+name + " age = " + age +" sex = "+sex);
    String message = "name = "+name + " age = " + age +" sex = "+sex;
    //返回客户端结果
    String result = getResponseResult(200,message);
    //将result返回客户端
    resp.getWriter().print(result);
    //这里可以不用关闭 resp.getWriter()流,由容器负责管理
  }
  //这里为了简单,没有引入处理json的包,这是模拟json数据
  public static String getResponseResult(int status,String message){
    return "{status: "+status+",message: '"+message+"'}";
  }
}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 <display-name>upload_demo</display-name>
 <!--  测试ajax servlet开始 -->
 <servlet>
    <servlet-name>testAjax</servlet-name>
    <servlet-class>cn.cupcat.controller.TestAJAXContorller</servlet-class>
 </servlet>
 <servlet-mapping>
    <servlet-name>testAjax</servlet-name>
    <url-pattern>/testAjax</url-pattern>
 </servlet-mapping>
 <!-- 测试ajax servlet结束 -->
 <welcome-file-list>
  <welcome-file>index.html</welcome-file>
  <welcome-file>index.htm</welcome-file>
  <welcome-file>index.jsp</welcome-file>
  <welcome-file>default.html</welcome-file>
  <welcome-file>default.htm</welcome-file>
  <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>
</web-app>

注意:

ajaxSubmit({})的也可以这样设置表单的method、action、表单项

type: 'post', // 提交方式 get/post
 url: 'your url', // 需要提交的 url
 data: {
    'title': title,
    'content': content
  },
 success: function(data) { // data 保存提交后返回的数据,一般为 json 数据
  // 此处可对 data 作相关处理
        alert('提交成功!');
 }

以上所述是小编给大家介绍的jQuery异步提交表单实例,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
JQuery样式与属性设置方法分析
Dec 07 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
Angular2使用jQuery的方法教程
May 28 #jQuery
Jquery中attr与prop的区别详解
May 27 #jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
jQuery导航条固定定位效果实例代码
May 26 #jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
Smarty变量用法详解
2016/05/11 PHP
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python编写实现抽奖器
2020/09/10 Python
python中添加模块导入路径的方法
2021/02/03 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
Java程序员面试题
2016/09/27 面试题
知识竞赛主持词
2014/03/26 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
优秀大学生自荐信
2014/06/09 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL