PHP提交表单后如何将cURL返回的跳转URL放在模态框中显示

1. 页面新增模态框DOM结构 #

你可以用原生CSS实现简单模态框，也可以直接复用项目中已有的UI组件库模态框，以下是原生实现示例：

<!-- 模态框容器 默认隐藏 -->
<div id="payModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:999;">
  <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:450px;height:500px;background:#fff;border-radius:8px;overflow:hidden;">
    <!-- 关闭按钮 -->
    <span id="closeModal" style="position:absolute;right:12px;top:8px;cursor:pointer;font-size:20px;font-weight:bold;z-index:10;">×</span>
    <!-- 加载跳转URL的iframe -->
    <iframe id="payIframe" src="" width="100%" height="100%" frameborder="0"></iframe>
  </div>
</div>

2. 修改表单提交逻辑为AJAX异步提交 #

原来的同步提交会触发页面刷新，改为异步提交即可保留当前页面状态，示例代码如下：

// 监听表单提交事件
document.getElementById('kakao_pay').addEventListener('submit', function(e) {
  // 阻止默认表单提交行为
  e.preventDefault();
  // 构造表单数据
  const formData = new FormData(this);
  
  // 发送AJAX请求到后端cURL处理接口
  fetch('替换为你的后端cURL处理接口地址', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(data => {
    if(data.code === 200) {
      // 把返回的跳转地址赋值给iframe
      document.getElementById('payIframe').src = data.next_redirect_pc_url;
      // 显示模态框
      document.getElementById('payModal').style.display = 'block';
    } else {
      alert('请求失败，请重试');
    }
  })
  .catch(err => {
    console.error('请求错误', err);
    alert('请求出错，请稍后再试');
  });
});

// 监听模态框关闭按钮
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('payModal').style.display = 'none';
  // 清空iframe地址避免后台继续加载
  document.getElementById('payIframe').src = '';
});

3. 修改后端cURL处理代码 #

原有代码直接输出跳转JS脚本，改为返回JSON格式数据给前端：

if ($status_code == 200) {
  $output_arr = json_decode($output, true);
  $page = $output_arr['next_redirect_pc_url'];
  // 返回JSON数据给前端
  echo json_encode([
    'code' => 200,
    'next_redirect_pc_url' => $page
  ]);
  exit;
} 
// 错误情况返回对应错误码
echo json_encode([
  'code' => 500,
  'msg' => '请求失败'
]);
exit;

注意事项 #

• 要确保后端接口的域名和当前页面域名满足跨域规则，如果存在跨域需要在后端配置CORS允许跨域访问
• 如果支付页面设置了禁止iframe嵌入的X-Frame-Options响应头，该方案会无法加载页面，这种情况只能保留原window.open弹出新窗口的逻辑

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