jQuery异步提交表单实例

2019-11-19 16:27:42

字体：大中小

来源：转载

供稿：网友

前言：

我们在开发的时候，一定会使用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异步提交表单实例，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

上一篇：JS给按钮添加跳转功能类似a标签

下一篇：JS实现多级菜单中当前菜单不随页面跳转样式而发生变化