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插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery实现简易QQ聊天框
Feb 10 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
基于mysql的论坛(3)
2006/10/09 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JS 建立对象的方法
2007/04/21 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python callable内置函数原理解析
2020/03/05 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
2014/11/05 HTML / CSS
销售找工作求职信
2013/12/20 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
小学语文国培感言
2014/03/04 职场文书
社区交通安全实施方案
2014/03/22 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
客房服务员岗位职责
2015/02/09 职场文书
实习生辞职信范文
2015/03/02 职场文书
入党后的感想
2015/08/10 职场文书
外科护士长工作总结
2015/08/12 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android