溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“jQuery如何實現異步提交表單”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“jQuery如何實現異步提交表單”這篇文章吧。
前言：
我們在開發的時候，一定會使用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如何實現異步提交表單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
