前言：
我們在開發的時候，一定會使用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異步提交表單實例，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
