溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jQuery為我們包裝簡化了常用的請求方法，其中有一個post方法，此方法可以通過 HTTP POST 請求從服務器載入數據。
語法：
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);
該方法實際上是簡寫的 Ajax 方法，等價于：
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});以下使用一個簡單的示例演示一下post方法的使用：
服務端代碼：
import org.json.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.HashMap;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
// 聲明返回的數據類型為json格式
resp.setContentType("application/json;charset=utf-8");
PrintWriter printWriter = resp.getWriter();
String date = new Date().toLocaleString();
if (username == null || password == null || password.trim().equals("") || username.trim().equals("")) {
System.out.println("賬戶或密碼為空！" + date);
resp.sendError(500);
return;
}
HashMap<String, String> hashMap = new HashMap();
if (username.equals("lisi") && password.equals("123456a")) {
System.out.println("登錄成功！" + date);
hashMap.put("response", "success!");
} else {
System.out.println("用戶名或密碼不正確！" + date);
hashMap.put("response", "username or password error!");
}
printWriter.write(new JSONObject(hashMap).toString());
printWriter.close();
}
}客戶端代碼：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="post_request();return false;" method="post" >
<input type="text" required placeholder="用戶名" name="username" /><br>
<input type="password" required placeholder="密碼" name="password" /><br>
<button type="submit" >登錄</button>
</form>
</body>
</html>js代碼：
function post_request() {
// 第二個參數是json格式的
$.post("login", {
"username": $("input[name='username']").val(),
"password": $("input[name='password']").val()
}, function (data, state) {
// 根據服務端返回的json格式得值，所以需要data.response
alert("data: " + data.response);
alert("state: " + state)
});
}運行結果：
雖然以上實驗已經可以成功的請求服務器并且載入了服務器返回的數據，但是將表單信息轉換成json格式的那一段代碼還是復雜了一些，每個表單組件的數據都得單獨的去獲得，如果表單中有十來個組件的話，豈不得寫十來句代碼去逐個獲得。所以這時候就得用到一個可以將表單數據序列化成json格式的神器：jquery.serializeJSON，這是一個基于jQuery的開源插件，以下是該插件的下載地址：
http://www.bootcdn.cn/jquery.serializeJSON/
使用該插件后，一句代碼就可以解決表單數據序列化成json格式的問題，修改后的代碼：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 要在jQuery之后導入該插件 -->
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="post_request(this);return false;" method="post" >
<input type="text" required placeholder="用戶名" name="username" /><br>
<input type="password" required placeholder="密碼" name="password" /><br>
<button type="submit" >登錄</button>
</form>
</body>
</html>js代碼：
function post_request(formObj) {
// 只需要提供表單對象，就可以序列化該表單中的數據為json格式
$.post("login", $(formObj).serializeJSON(), function (data, state) {
alert("data: " + data.response);
alert("state: " + state)
});
}服務端代碼依舊不變，運行結果：
get和post在使用上基本上是一樣的，這是一個簡單的 GET 請求功能以取代復雜 \$.ajax 。請求成功時可調用回調函數。如果想要在出錯時執行函數，則需要使用 $.ajax。
語法：
$(selector).get(url,data,success(response,status,xhr),dataType)
同樣的該函數也是簡寫的 Ajax 函數，等價于：
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});示例：
服務端代碼只需要把doPost改為doGet即可。
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="get_request(this);return false;" method="get" >
<input type="text" required placeholder="用戶名" name="username" /><br>
<input type="password" required placeholder="密碼" name="password" /><br>
<button type="submit" >登錄</button>
</form>
</body>
</html>js代碼：
function get_request(formObj) {
$.get("login", $(formObj).serializeJSON(), function (data, state) {
alert("data: " + data.response);
alert("state: " + state)
});
}運行結果：
思維導圖：
ajax方法是 jQuery 底層的 AJAX 實現，而以上介紹的get和post方法則是ajax方法的簡寫，ajax方法會返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該函數，除非你需要操作不常用的選項，以獲得更多的靈活性。
最簡單的情況下，ajax() 可以不帶任何參數直接使用。
提示：所有的選項都可以通過 $.ajaxSetup() 函數來進行全局設置。
語法：
jQuery.ajax({settings...})
下面的表格中列出了可能的鍵/值：
示例，服務端代碼不變：
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
<form onsubmit="get_request(this);return false;" method="get" >
<input type="text" required placeholder="用戶名" name="username" /><br>
<input type="password" required placeholder="密碼" name="password" /><br>
<button type="submit" >登錄</button>
</form>
</body>
</html>js代碼：
function ajax_request(formObj) {
$.ajax({
type: "post", // 指定請求方式
url: "login",
async: true, // 開啟異步
data: $(formObj).serializeJSON(),
success: function (result, state) { // 回調函數
alert("result: " + result);
alert("state: " + state);
},
dataType: "json"
});
}運行結果：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
