如何使用XMLHTTPRequest传递变量

Question

如何将变量发送到服务器XMLHTTPRequest？我会将它们添加到GET请求的URL的末尾,比如?variable1=?variable2=等等吗？

所以或多或少:

XMLHttpRequest("GET", "blahblah.psp?variable1=?" + var1 + "?variable2=" + var2, true)

Answer 1

如果你想使用GET将变量传递给服务器,那将是肯定的.记得妥善逃脱(urlencode)!

如果您不希望变量可见,也可以使用POST.

完整的样本将是:

var url = "bla.php";
var params = "somevariable=somevalue&anothervariable=anothervalue";
var http = new XMLHttpRequest();

http.open("GET", url+"?"+params, true);
http.onreadystatechange = function()
{
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(null);

要测试这个,(使用PHP)你可以var_dump $_GET看到你检索的内容.

Answer 2

手动格式化查询字符串适用于简单的情况.但是当有许多参数时,它会变得乏味.

您可以编写一个简单的实用程序函数来处理为您构建查询格式.

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+encodeURIComponent(params[key])
        })
        .join("&")
}

你会用这种方式来构建一个请求.

var endpoint = "https://api.example.com/endpoint"
var params = {
  a: 1, 
  b: 2,
  c: 3
}

var url = endpoint + formatParams(params)
//=> "https://api.example.com/endpoint?a=1&b=2&c=3"

有许多实用程序函数可用于操作URL.如果您的项目中有JQuery,可以试试http://api.jquery.com/jquery.param/.

它类似于上面的示例函数,但处理递归序列化嵌套对象和数组.

Answer 3

如果您对字符串连接过敏并且不需要 IE 兼容性，您可以使用URLand URLSearchParams：

const target = new URL('https://example.com/endpoint');
const params = new URLSearchParams();
params.set('var1', 'foo');
params.set('var2', 'bar');
target.search = params.toString();

console.log(target);

或者转换整个对象的参数值：

const paramsObject = {
  var1: 'foo',
  var2: 'bar'
};

const target = new URL('https://example.com/endpoint');
target.search = new URLSearchParams(paramsObject).toString();

console.log(target);

Answer 4

在GET请求中传递变量的正确格式是

?variable1=value1&variable2=value2&variable3=value3...
                 ^ ---notice &--- ^

但基本上,你有正确的想法.