如何使用XMLHTTPRequest传递变量?

How do I pass along variables with XMLHTTPRequest

本文关键字：变量 何使用 XMLHTTPRequest      更新时间：2023-09-26

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

所以more or less:

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

如果您想使用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查看检索到的内容。

对于简单的情况，手动格式化查询字符串是可以的。但是当有很多参数时，它会变得很繁琐。

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

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

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

如果您对字符串连接过敏，并且不需要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);

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

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

但基本上，你的想法是对的。

正确做法如下:

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

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

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

分隔

。如上所述? variable1 = value1&的操作= value2

怎么样?

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
}
相关文章：