如何使用XMLHTTPRequest传递变量

Question

我怎样使用 XMLHTTPRequest 将变量发送到服务器？我只需将它们添加到 GET 请求的 URL 结尾，例如如下形式： ?variable1=?variable2= 等等吗？

总之就是这样：

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

- Steven Matthews

---

你可以这样做，但是你需要用&符号而不是问号来分隔键/值对。所以代码应该是："blahblah.php?variable1=" + var1 + "&variable2=" + var2。 - nnnnnn

请注意var1和var2本身不包含保留字符。您可能需要使用encodeURIComponent()对它们进行转义。 - nullability

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来查看你获取了什么。

- TJHeuvel

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

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

- James Forbes

Answer 3

如果你不喜欢字符串拼接并且不需要兼容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);

- AuxTaco

---

很好 - 至少是正常的方式 - Emiter

Answer 4

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

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

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

- mellamokb

Answer 5

以下是正确的方法：

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

- Muhammad Junaid Iqbal

---

找这个东西的工作太多了。在send()中不需要使用编码参数来传递PHP查询字符串。当然，如果需要安全性，POST更好。 - David Spector

Answer 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
}

- ENDEESA

Answer 7

是的，这是用 GET 请求执行的正确方法。

但请记住，多个查询字符串参数应以“&”分隔。

例如：?variable1=value1&variable2=value2

- cowls