AJAX get請求提交數(shù)據(jù)的具體步驟

更新時間：2025年05月23日 10:44:57 作者：magic 245

在AJAX中使用 GET 請求提交數(shù)據(jù),主要通過在URL后拼接查詢參數(shù)的方式實現(xiàn),下面給大家分享AJAX get請求提交數(shù)據(jù)的具體步驟,感興趣的朋友一起看看吧

1.構造帶參數(shù)的 URL

將數(shù)據(jù)以 鍵=值 的形式拼接在 URL 后，多個參數(shù)間用 & 連接。例如：

var url = "https://example.com/api?param1=value1&param2=value2";

若參數(shù)值包含特殊字符（如空格、中文等），需用 encodeURIComponent() 編碼，確保 URL 合法：

var paramValue = "特殊值/空格";  
var encodedParam = encodeURIComponent(paramValue);  
var url = `https://example.com/api?param=${encodedParam}`;

2.發(fā)起 GET 請求

使用 XMLHttpRequest 對象發(fā)起請求，將構造好的 URL 傳入 open() 方法：

var xhr = new XMLHttpRequest();  
xhr.open("GET", url, true); // 第三個參數(shù)為是否異步，一般設為 true  
xhr.send(); // GET 請求的 send() 通常無參數(shù)（數(shù)據(jù)已在 URL 中）

示例：

window.onload = function() {  
  document.getElementById("helloBtn").onclick = function() {  
    var xhr = new XMLHttpRequest();  
    // 拼接參數(shù)（假設獲取用戶信息，參數(shù)為用戶名和年齡）  
    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) {  
        // 處理響應數(shù)據(jù)  
        console.log(xhr.responseText);  
      }  
    };  
    xhr.send();  
  };  
};

注意：