JavaScript頁面傳參數是前端開發中非常常見的需求，無論是通過URL傳遞參數，還是通過表單提交數據，都需要使用JavaScript進行操作。下面我們就來具體講解一下JavaScript頁面傳參數的方法和技巧。
一、傳統的URL傳參方法
在傳統的前后端不分離的開發過程中，我們經常會通過URL傳遞參數來實現頁面之間的數據傳遞。比如下面這個URL，就通過“？”后面的參數來傳遞id=1和name=“jason”兩個參數：
https://www.example.com/index.php?id=1&name=jason
我們可以使用JavaScript獲取URL中的參數值，以便進行后續的操作。代碼如下：

function getQueryParam(param) {
var result = null,
tmp = [];
location.search
.slice(1)
.split("&")
.forEach(function(item) {
tmp = item.split("=");
if (tmp[0] === param) result = decodeURIComponent(tmp[1]);
});
return result;
}
<br>
var id = getQueryParam("id");
var name = getQueryParam("name");

二、通過表單提交數據
除了通過URL傳遞參數，我們還可以通過表單提交數據來實現數據傳遞。這種方法常用于用戶注冊、登錄等場景中。我們先看一下HTML中的表單代碼：

<form action="/login" method="POST">
<input type="text" name="username" placeholder="請輸入您的用戶名" />
<input type="password" name="password" placeholder="請輸入您的密碼" />
<button type="submit">登錄</button>
</form>

在JavaScript中，我們可以通過FormData對象來獲取表單提交的數據。代碼如下：

var form = document.querySelector("form");
var formData = new FormData(form);
<br>
formData.append("rememberMe", true); // 添加額外的數據
<br>
fetch("/login", {
method: "POST",
body: formData
})
.then(function(response) {
// 獲取響應結果
return response.json();
})
.then(function(data) {
console.log(data);
});

三、通過AJAX傳遞參數
在現代的前端開發中，我們通常使用AJAX來實現頁面間的數據傳遞。AJAX可以實現異步請求，不需要刷新整個頁面就可以更新部分數據。我們使用jQuery的$.ajax方法來進行AJAX請求。代碼如下：

$.ajax({
url: "/api/getUserInfo",
type: "POST",
data: {
id: 1,
name: "jason"
},
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});

需要注意的是，如果我們需要傳遞的參數比較多，可以使用JSON格式來傳遞參數。代碼如下：

var requestData = {
id: 1,
name: "jason",
age: 28,
gender: "male"
};
<br>
$.ajax({
url: "/api/getUserInfo",
type: "POST",
data: JSON.stringify(requestData),
contentType: "application/json",
dataType: "json",
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});

通過以上方法，我們就可以實現JavaScript頁面傳參數的需求。在實際開發中，我們根據具體的業務場景選擇相應的方法進行操作。