如何用JavaScript向后端发送处理后的URL哈希片段数据？

1. 发送bar数据到目标地址 #

直接在原script标签里添加发送逻辑即可，这里用易懂的fetch API实现：

<script>
var foo = bar;

// 定义发送数据的函数
function sendBarData() {
  // 发送POST请求（后端要求GET的话看下方简化写法）
  fetch('http://example.com/get-data/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ bar: bar }) // 把bar包装成后端易解析的JSON格式
  })
  .then(res => {
    res.ok ? console.log('发送成功') : console.log('发送失败');
  })
  .catch(err => console.error('请求出错:', err));
}

// 调用函数发送数据
sendBarData();
</script>

如果后端接受GET请求，可以简化为：

// GET方式发送，数据直接拼在URL后
fetch('http://example.com/get-data/?bar=' + encodeURIComponent(bar))
.then(res => {
  res.ok ? console.log('发送成功') : console.log('发送失败');
})
.catch(err => console.error('请求出错:', err));

2. 发送处理后的哈希令牌到后端 #

修改你已有的代码，添加发送逻辑即可：

<body>
  <script>
    var hash_token = window.location.hash;
    var removed_hash_token = hash_token.slice(1); // 规范声明变量
    console.log('处理后的令牌:', removed_hash_token); // 替代alert，更适合生产环境调试

    var get_token_url = "http://localhost:8000/";

    // 发送令牌到后端
    function sendToken() {
      fetch(get_token_url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ token: removed_hash_token })
      })
      .then(res => {
        res.ok ? console.log('令牌发送成功') : console.log('令牌发送失败');
      })
      .catch(err => console.error('请求出错:', err));
    }

    sendToken();
  </script>
</body>

同样，如果后端用GET接收，改成：

fetch(get_token_url + '?token=' + encodeURIComponent(removed_hash_token))
.then(res => {
  res.ok ? console.log('令牌发送成功') : console.log('令牌发送失败');
})
.catch(err => console.error('请求出错:', err));

注意事项 #

如果浏览器控制台出现跨域相关错误，需要后端配置CORS规则，允许当前页面的域名访问后端接口。

内容的提问来源于stack exchange，提问作者zoro