如何实现带可变URL的PHP/JS无刷新重定向？

你遇到的问题核心在于：AJAX请求返回的PHP输出内容只是字符串，并没有自动添加到当前页面的DOM中，所以你用document.getElementById("my_url")找不到这个元素，自然拿不到URL。下面给你两种可行的解决方案，优先推荐第一种更优雅的JSON交互方式：

方案1：PHP返回JSON格式的URL（推荐） #

这种方式是AJAX数据交互的标准做法，轻量且易维护：

修改PHP代码（file.php） #

不再输出HTML标签，而是直接返回包含动态URL的JSON数据：

<?php
if (isset($_POST['check_button'])) {
    // 根据用户之前的操作生成动态URL
    $dynamic_url = "https://your-target-url.com"; // 这里替换成你的动态生成逻辑
    
    // 输出JSON格式数据，确保没有其他额外输出
    echo json_encode(['redirect_url' => $dynamic_url]);
    exit; // 终止脚本，避免后续输出干扰JSON解析
}
?>

修改JS代码 #

在AJAX请求中指定返回类型为JSON，直接解析拿到URL后跳转：

$(document).ready(function () {
 $("#my_button").click(function () {
  $.ajax({
   type: 'POST',
   url: 'file.php',
   data: {check_button: '1', email: 'user@email.com'},
   dataType: 'json', // 告诉jQuery预期返回JSON格式数据
   success: function(response){
    // 检查是否成功获取到URL
    if (response.redirect_url) {
        window.location.href = response.redirect_url;
    } else {
        alert('无法获取跳转地址，请稍后重试');
    }
   },
   // 处理请求失败的情况
   error: function(xhr, status, error) {
       console.error('请求出错:', error);
       alert('请求失败，请检查网络或稍后重试');
   }
  });
 });
});

方案2：将PHP返回的HTML片段插入DOM后再获取URL #

如果你坚持要用输出hidden input的方式，需要先把AJAX返回的HTML插入到当前页面的DOM中，再去获取元素：

修改JS的success回调 #

success: function(data){
    // 将PHP返回的input标签插入到页面的某个位置（比如body末尾）
    $('body').append(data);
    // 现在可以获取到这个元素了
    var url = document.getElementById("my_url").value;
    window.location.href = url;
}

注意事项 #

• 这种方式不如JSON优雅，因为返回的是HTML片段，数据和结构耦合在一起，后续维护成本更高。
• 确保PHP只输出这个input标签，没有其他额外的空格、echo内容，否则插入DOM后可能出现问题。

关键提醒 #

• 无论用哪种方案，PHP都要确保没有额外的输出（比如开头的空格、注释输出等），否则会导致JSON解析失败或者DOM插入异常。
• 一定要处理AJAX请求失败的情况，避免用户点击按钮后没有任何反馈。

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