在 AJAX 中使用 GET 請求提交數據,主要通過?在 URL 后拼接查詢參數?的方式實現,具體步驟如下:
1.構造帶參數的 URL
將數據以?鍵=值
?的形式拼接在 URL 后,多個參數間用?&
?連接。例如:
var url = "https://example.com/api?param1=value1¶m2=value2";
若參數值包含特殊字符(如空格、中文等),需用?encodeURIComponent()
?編碼,確保 URL 合法:
var paramValue = "特殊值/空格";
var encodedParam = encodeURIComponent(paramValue);
var url = `https://example.com/api?param=${encodedParam}`;
2.發起 GET 請求
使用?XMLHttpRequest
?對象發起請求,將構造好的 URL 傳入?open()
?方法:
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // 第三個參數為是否異步,一般設為 true
xhr.send(); // GET 請求的 send() 通常無參數(數據已在 URL 中)
示例:
window.onload = function() { document.getElementById("helloBtn").onclick = function() { var xhr = new XMLHttpRequest(); // 拼接參數(假設獲取用戶信息,參數為用戶名和年齡) var params = "username=John&age=30"; var url = "/ajax/ajaxrequest1?" + params; xhr.open("GET", url, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 處理響應數據 console.log(xhr.responseText); } }; xhr.send(); };
};
注意:
- GET 請求的參數暴露在 URL 中,不適合傳輸敏感數據(如密碼)。
- 不同瀏覽器對 URL 長度有限制(一般約 4KB),不適合傳輸大量數據。
通過這種方式,即可在 AJAX 的 GET 請求中向服務器提交數據。