如何使用 XMLHTTPRequest 传递变量答案

【问题标题】：How do I pass along variables with XMLHTTPRequest如何使用 XMLHTTPRequest 传递变量
【发布时间】：2011-12-25 06:25:32
【问题描述】：

如何使用XMLHTTPRequest 将变量发送到服务器？我可以将它们添加到 GET 请求的 URL 的末尾，例如 ?variable1=?variable2= 等吗？

或多或少：

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

【问题讨论】：

你可以这样做，但你需要用＆符号而不是问号分隔键/值对。所以："blahblah.php?variable1=" + var1 + "&variable2=" + var2
还要注意var1 和var2 本身不包含保留字符。你可能想用encodeURIComponent() 来逃避它们。

标签： javascript html ajax

【解决方案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 来查看您检索到的内容。

【讨论】：

【解决方案2】：

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

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

但本质上，您的想法是正确的。

【讨论】：

【解决方案3】：

是的，这是使用 GET 请求执行此操作的正确方法。

但是，请记住多个查询字符串参数应该用 & 分隔

例如。 ?variable1=value1&variable2=value2

【讨论】：

【解决方案4】：

以下是正确的方法：

xmlhttp.open("GET","getuser.php?fname="+abc ,true);

【讨论】：

【解决方案5】：

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

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

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/。

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

【讨论】：

【解决方案6】：

怎么样？

function callHttpService(url, params){
  // Assume params contains key/value request params
  let queryStrings = '';

  for(let key in params){
      queryStrings += `${key}=${params[key]}&`
    } 
 const fullUrl = `${url}?queryStrings`

  //make http request with fullUrl
}

【讨论】：

【解决方案7】：

如果你对字符串拼接过敏，不需要IE兼容，可以使用URL和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);

【讨论】：

很棒 - 至少是正常的方式