如何将URL查询字符串结果添加至Ajax请求数据中？

你只需要用join('&')方法把数组元素拼接起来就行，这样就能得到标准的URL查询字符串格式，直接可以用于Ajax请求的data参数。

具体代码示例 #

首先执行拼接操作：

var query = getQuery();
var queries = query.join('&'); // 最终结果为 "b=5&m=2"

用于jQuery Ajax请求 #

如果使用jQuery发送请求，直接把拼接好的字符串传给data属性即可：

$.ajax({
  url: '/your-target-endpoint',
  method: 'POST', // 若用GET方式，这个字符串会自动拼接到URL末尾
  data: queries,
  success: function(response) {
    // 这里处理请求成功后的响应逻辑
  }
});

用于原生XMLHttpRequest请求 #

原生XHR也能直接使用这个字符串，注意要设置正确的请求头：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/your-target-endpoint');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 处理成功响应的逻辑
  }
};
xhr.send(queries);

额外优化建议 #

其实你的getQuery函数可以改得更实用——目前返回的是["key=value"]格式的数组，不如直接返回键值对对象，这样在Ajax中使用会更灵活：

function getQuery(){ 
  var vars = {}, hash; 
  var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
  for(var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    // 记得解码参数，避免中文或特殊字符出现乱码问题
    var key = decodeURIComponent(hash[0]);
    var value = decodeURIComponent(hash[1]);
    vars[key] = value; 
  } 
  return vars; 
}

修改后执行var query = getQuery();会得到{b: "5", m: "2"}，这时如果用jQuery的Ajax，直接传这个对象就行（jQuery会自动帮你转成查询字符串）；如果是原生XHR，可以用new URLSearchParams(query).toString()来生成拼接后的字符串。

内容的提问来源于stack exchange，提问作者Jack The Baker