JQuery發送Ajax請求的5種簡單使用方式，一看就會~
1、Ajax簡介
1.1 什么是Ajax
Ajax即Asynchronous Javascript And XML（異步JavaScript和XML），在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現有技術集合的新方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest，使用Ajax技術網頁應用能夠快速地將增量更新呈現在用戶界面上，而不需要多載（重繪）整個頁面，這使得程式能夠更快地回應用戶的操作，
異步重繪：
如網頁中某一個地方需要修改，只重繪需要修改的地方，其他地方不變，（比如網頁點贊，只重繪贊的數量）
1.2 Ajax優缺點
優點：
- 使用Ajax的最大優點，就是能在
不更新整個頁面的前提下維護資料，這使得Web應用程式更為迅捷地回應用戶動作，并避免了在網路上發送那些沒有改變的資訊， - Ajax
不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行，就像DHTML應用程式那樣，Ajax應用程式必須在眾多不同的瀏覽器和平臺上經過嚴格的測驗，
缺點：
- 它
可能破壞瀏覽器的后退與加入收藏書簽功能，在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記下歷史記錄中的靜態頁面，一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的可能差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在Ajax應用程式中，卻無法這樣做，
2、如何使用Ajax
- 在
JavaScript中使用Ajax，代碼復雜，不推薦 - 在
JQuery中使用Ajax，代碼簡單，推薦
2.1 用JavaScript方式使用Ajax
可以參考其他博主文章，這里不再贅述
2.2 使用jQuery使用Ajax
說明：
- JQuery發送ajax請求共有
四種方式：通用的方式、get、post、load - 請求成功的函式回傳值引數名可以自定義，例外的函式引數名是固定的
語法說明：
// 值均寫在引號內，單引號和雙引號都可以
$.ajax({
url: '', // 請求的地址，即要給那里發送請求
data: { // 請求引數，有多個時以逗號分割
name: 'zhangsan',
pwd: '123'
},
type: 'get', // 請求方式，get、post
dataType: 'text', // 回傳值型別， json、text等
success: function (res) { // 請求成功執行此方法，res為回傳值，名稱自定義
$('#get1').html(res)
},
error: function (xhr, errorMessage, e) { //請求例外執行此方法，引數名不建議修改,可以不寫這個函式
alert(errorMessage);
}
})
2.3 簡單實體
頁面代碼：
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Ajax請求示例</title>
</head>
<body style="text-align: center">
<style>
td {
width: 300px;
border: 1px black solid;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
function getOne() {
$.ajax({
url: 'getOne',
data: {
name: 'zhangsan',
pwd: '123'
},
type: 'get',
dataType: 'text',
success: function (res) {
$('#get1').html(res)
},
error: function (xhr, errorMessage, e) {
alert(errorMessage);
}
})
}
function getTwo() {
$.get('getTwo', 'name=zs&pwd=333',
function (res) {
$('#get2').html(res)
}, 'text'); // 'text'為回傳值型別
}
function postOne() {
$.ajax({
url: 'postOne',
data: {
name: 'zhangsan',
pwd: '123'
},
type: 'post',
dataType: 'text',
success: function (res) {
$('#post1').html(res)
},
error: function (xhr, errorMessage, e) {
alert(e)
}
})
}
function postTwo() {
$.post('postTwo', 'name=zhangsan',
function (res) {
$('#post2').html(res)
}, 'text');
}
function load() {
$('#load').load('loadRequest', 'name=lisi', function (res) { // url, data, callback
// 即請求地址，請求引數，請求后執行的函式
$('#load').html(res)
});
}
</script>
<table cellpadding="20px" border="3px solid black" th:cellspacing="0" style="margin: 110px auto">
<tr>
<td>
<button onclick="getOne()">第一種get請求</button>
</td>
<td id="get1"></td>
<td>
<button onclick="getTwo()">第二種get請求</button>
</td>
<td id="get2"></td>
</tr>
<tr>
<td>
<button onclick="postOne()">第一種post請求</button>
</td>
<td id="post1"></td>
<td>
<button onclick="postTwo()">第二種post請求</button>
</td>
<td id="post2"></td>
</tr>
<tr>
<td ><button onclick="load()">load 請求</button></td>
<td id="load"></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
controller代碼：
使用Springboot：
package priv.happy.ajax_study.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import priv.happy.ajax_study.entity.User;
/**
* @Author: HAPPY
* @Project_name: Ajax
* @Package_name: priv.happy.ajax_study.controller
* @Date: 2021/10/19 20:11
* explain: jquery結合Ajax的5種簡單使用方式
*/
@Controller
public class AjaxController {
@GetMapping("/")
public String index() {
return "index";
}
@GetMapping("/getOne")
@ResponseBody
public String getRequestOne(@RequestParam("name") String name, @RequestParam("pwd") String pwd) {
System.out.println("name: " + name);
System.out.println("pwd: " + pwd);
return "Ajax回傳第一種get請求";
}
@GetMapping("/getTwo")
@ResponseBody
public String getRequestTwo(@RequestParam("name") String name, @RequestParam("pwd") String pwd) {
System.out.println("name: " + name);
System.out.println("pwd: " + pwd);
return "Ajax回傳第二種get請求";
}
@PostMapping("/postOne")
@ResponseBody
public String postRequestOne(User user) {
System.out.println(user);
return "Ajax回傳第一種post請求";
}
@PostMapping("/postTwo")
@ResponseBody
public String postRequestTwo(User user) {
System.out.println(user);
return "Ajax回傳第二種post請求";
}
@GetMapping("/loadRequest")
@ResponseBody
public String loadRequest(@RequestParam("name") String name) {
System.out.println("name" + name);
return "回應load的ajax請求";
}
}
使用Servlet：
// 和spring boot controller 處理區別只有回傳方式，所以這里只寫一下servlet的回傳方式
@WebServlet(name = "getOne", urlPatterns = "/getOne")
public class GetOne extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 處理業務邏輯
// 回應請求，使用流的方式肯能會有IO例外，所以捕捉例外
PrintWriter out = response.getWriter();
try {
out.write("第一種get");
out.close
} catch (Exception exception) {
out.write(exception);
}
out.close();
}
}
程式執行結果：
發請求前：
逐個點擊按鈕發請求后：
問題：異步重繪體現在哪？
看動圖~
我們可以看到，當我點擊了一個按鈕時，只有對應地方的值被修改了，而且頁面并沒有進行全部重繪，只是將對應部分進行了區域重繪，
附加：
利用Ajax結合JavaScript的事件監聽器，例如按鍵監聽等，就可以實作在輸入框輸入文本時，動態的從資料庫中查出值進行提示！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325606.html
標籤：其他
上一篇：想實作前端酷炫的打字機效果嗎
下一篇：js面試題-10月