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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 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
小偷PHP+Html+缓存
2006/11/25 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python标准库itertools的使用方法
2020/01/17 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
大学生实习期自我评价范文
2013/10/03 职场文书
2013年保送生自荐信格式
2013/11/20 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
上班打牌检讨书
2014/02/07 职场文书
开学典礼决心书
2014/03/11 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis