jQuery异步提交表单（有实例）

忘是亡心i 2022-06-15 09:13 252阅读 0赞

\#\#\#\#前言：

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

\#\#\#\#前提准备：引入脚本

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
    
        
        <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%>">
        <title>Title</title>
        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
    
        
        <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>
      
      
      <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>
      
      
    
      
      <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('提交成功！');
     }