AngularJS中HTTP POST请求后提交PHP表单问题

嘿，我完全懂你的困扰——刚接触陌生的PHP，又要对接第三方支付，很容易卡在这种基础细节上。咱们一步步来搞定：

问题根源 #

银行提供的PHP文件只是输出支付表单的静态HTML，没有自动提交的逻辑；而且AngularJS默认发送的是JSON格式的POST请求，PHP默认的$_POST没法直接解析，这两个点是核心问题。

步骤1：修改PHP文件，让表单自动提交 + 正确接收Angular的参数 #

打开银行给的PHP文件，做以下修改：

<?php
// 1. 接收Angular发送的JSON数据（关键！否则拿不到total）
$input = file_get_contents('php://input');
$paymentData = json_decode($input, true);
$total = isset($paymentData['total']) ? $paymentData['total'] : 0;

// 2. 输出银行要求的支付表单，加上ID方便自动提交
?>
<form id="autoSubmitPaymentForm" action="银行网关的URL" method="POST">
    <!-- 银行要求的隐藏字段，替换成实际需要的参数 -->
    <input type="hidden" name="amount" value="<?php echo $total; ?>">
    <input type="hidden" name="merchant_id" value="你的商户ID">
    <!-- 其他必填字段：订单号、签名、币种等，按银行文档添加 -->
</form>

<!-- 3. 添加自动提交脚本 -->
<script>
    // 页面加载后立即提交表单
    window.onload = function() {
        document.getElementById('autoSubmitPaymentForm').submit();
    };
</script>

步骤2：修改AngularJS代码，处理返回的HTML #

你的Angular请求拿到PHP返回的HTML后，需要把它插入到页面中，让浏览器执行自动提交的脚本：

$scope.sabadell = function() {
    $scope.pago = { 'total': $scope.total };
    
    $http.post('你的PHP文件路径', $scope.pago)
        .then(function(response) {
            // 把返回的HTML插入到页面提前准备好的容器里
            // 比如在HTML中添加：<div id="payment-container"></div>
            const paymentContainer = document.getElementById('payment-container');
            paymentContainer.innerHTML = response.data;
        }, function(error) {
            console.error('请求支付接口出错:', error);
            // 可添加用户可见的错误提示，比如弹窗告知支付请求失败
        });
};

额外注意事项 #

• 银行参数完整性：一定要对照银行的支付文档，确保表单包含所有必填字段（比如商户ID、订单号、签名、币种等），只传total银行会拒绝请求。
• 跨域问题：如果Angular应用和PHP文件不在同一域名下，需在PHP开头添加跨域头：

header("Access-Control-Allow-Origin: 你的Angular应用域名"); // 生产环境不要用*
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");

• 调试技巧：可以用Postman模拟Angular的请求，查看返回的HTML是否正确，表单字段是否填充到位。

这样修改后，当你在Angular里触发sabadell方法，请求到PHP后，页面会自动插入表单并提交到银行网关，完成支付跳转啦！

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