JS网页参数传递
在web开发中，难免会碰到往页面传递参数的问题。JavaScript是web开发中重要的语言之一，那么就让我们来探讨一下JS中网页参数的传递，多用举例演示。
传递参数的方式
常见的传递参数方式有三种：1）query string 2）表单 3）AJAX调用
1. Query string
GET方式请求时，可以在URL后边加上?和参数名和值来直接标识需要传递的参数。如下所示：
http://xxxx.com/index.html?name=abc&age=15
则在JavaScript中获取参数的方式：
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
var name = GetQueryString("name");
var age = GetQueryString("age");
2. 表单
表单可以是HTML中的标签，也可以是JS中的动态创建。我们可以通过表单中的input标签来传递参数，通过表单的submit事件来提交参数。如下所示：
HTML中：JavaScript中：
var form = document.createElement("form");
form.action = "index.html";
form.method = "post";
document.documentElement.appendChild(form);
var nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.name = "name";
form.appendChild(nameInput);
var ageInput = document.createElement("input");
ageInput.type = "text";
ageInput.name = "age";
form.appendChild(ageInput);
var submitInput = document.createElement("input");
submitInput.type = "submit";
submitInput.value = "提交";
form.appendChild(submitInput);
3. AJAX调用
AJAX可以使用jQuery、XMLHttpRequest等方式，通过在URL中添加参数来传递参数。如下所示：
jQuery中：
$.ajax({
type: 'post',
url: 'index.html',
data: {
name: 'abc',
age: '15'
},
success: function(result) {
console.log(result);
}
});
XMLHttpRequest中：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
}
xhr.open('post', 'index.html', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('name=abc&age=15');
小结
通过以上三种方式，我们可以轻松地实现网页参数的传递，并进行相应的操作。在实际开发中，需要根据具体场景选择最适合的传递方式。