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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery实现的form转json经典示例
Oct 10 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jQuery实现滑动开关效果
Aug 02 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目录管理函数小结
2008/09/10 PHP
Laravel框架表单验证详解
2014/09/04 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
运动会入场词
2015/07/18 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS