如何在jQuery与HTML中为从MongoDB获取的URL追加内容？

看起来你想实现的是：点击按钮后，根据选中的复选框请求后端获取MongoDB里的URL后缀，然后把这个后缀追加到当前页面的URL末尾并跳转对吧？我帮你调整代码并解释关键问题：

首先你的原有代码有两个核心问题需要修正：

• 直接给window.location赋值固定字符串会直接跳转，完全没有用到当前页面的URL
• Ajax是异步操作，你不能在请求发起前就处理MongoDB返回的数据，必须等请求成功拿到结果后再操作

下面是调整后的完整可运行代码，我会标注关键细节：

$(document).ready(function(){
  $("#test").click(function(){
    // 1. 获取当前页面的基础URL（协议+域名+当前路径，比如 https://your-site.com/current-page）
    const currentBaseUrl = window.location.origin + window.location.pathname;
    const selectedCheckboxes = $('input[type="checkbox"]:checked');
    
    // 先判断是否有选中的复选框
    if(selectedCheckboxes.length > 0) {
      // 2. 处理选中的复选框值，去掉末尾多余空格
      let selectedValues = "";
      selectedCheckboxes.each(function () {
        selectedValues += $(this).val() + " ";
      });
      selectedValues = selectedValues.trim();

      // 3. 发起Ajax请求获取MongoDB中的URL字段
      $.ajax({
        type: 'POST',
        url: '/recipe',
        data: { selected: selectedValues }, // 把选中的值传给后端接口
        success: function(responseData) {
          // 4. 从后端返回的数据中拿到MongoDB的URL后缀（这里假设responseData是数组，取第一个元素的url，根据你的实际结构调整）
          const mongoUrlSuffix = responseData[0].url;
          
          // 5. 拼接新URL：确保路径分隔符正确，避免出现//的情况
          const finalUrl = `${currentBaseUrl}/${mongoUrlSuffix}`;
          
          // 6. 跳转到拼接好的新地址
          window.location.href = finalUrl;
        },
        error: function(error) {
          // 处理请求失败的情况，比如提示用户
          console.error('获取URL失败:', error);
          alert('抱歉，无法获取目标地址，请稍后重试');
        }
      });
    } else {
      // 没有选中复选框时的提示
      alert('请至少选择一个选项再继续');
    }
  });
});

关键要点说明： #

• 当前URL的正确获取方式：用window.location.origin + window.location.pathname能精准拿到当前页面的基础地址，不会包含URL参数或哈希值，方便后续拼接
• 异步操作的处理：所有依赖MongoDB返回数据的逻辑（比如URL拼接、跳转）必须放在success回调里，因为Ajax请求是异步的，请求发起后代码会继续执行，只有当请求成功返回数据时，responseData才会有值
• 字符串清理：把selectedValues末尾的空格去掉，避免传给后端的参数有多余字符，减少潜在的接口错误
• URL拼接的兼容性：用ES6模板字符串拼接更直观，同时要注意如果mongoUrlSuffix本身开头就带有/，可以把拼接改成${currentBaseUrl}${mongoUrlSuffix}，避免出现//的无效路径

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