JavaScript变量传入PHP函数及返回值处理异常问题

核心问题 #

你当前的代码犯了一个本质错误：PHP是服务器端语言，页面加载时就会执行完毕；而JavaScript是客户端语言，点击按钮时才会运行。你直接在JS代码里嵌入PHP函数调用，导致PHP在页面渲染阶段就执行了expresspay，此时JS变量phone、amount还不存在，传递给PHP的是字符串字面量"' + phone + '"，而非用户输入的实际值，这就是为什么数组内$phone为空、返回结果异常的原因。

错误点拆解 #

• 执行顺序颠倒：PHP先于JS执行，无法获取客户端运行时的变量值
• 参数传递无效：你试图用字符串拼接的方式传递JS变量给PHP，这种写法完全不成立，PHP接收的是静态字符串而非动态输入值

正确解决方案：用AJAX实现前后端交互 #

要实现点击按钮后将JS变量传给PHP函数并获取返回值，必须通过AJAX异步请求，步骤如下：

1. 把PHP的expresspay逻辑封装成独立的接口（可以是单独的PHP文件，或者当前页面内的POST处理逻辑）
2. 在JS的点击事件中，用AJAX将用户输入的参数发送到该接口
3. PHP接口接收参数，调用expresspay处理后返回JSON结果
4. JS接收返回的结果并处理

修正后的代码示例 #

1. PHP接口部分（可放在当前页面顶部，或单独文件如mpesa_pay.php）

<?php
// 处理AJAX POST请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取POST参数
    $phone = $_POST['phone'] ?? '';
    $amount = $_POST['amount'] ?? 0;
    $item_name = $_POST['item_name'] ?? '';

    // PHP端手机号双重验证格式化
    function formatPhoneNumberPHP($phoneNumber) {
        $phoneNumber = preg_replace('/\s/', '', $phoneNumber);
        if (preg_match('/^0\d{9}$/', $phoneNumber)) {
            return '254' . substr($phoneNumber, 1);
        }
        if (preg_match('/^[1-9]\d{8}$/', $phoneNumber)) {
            return '254' . $phoneNumber;
        }
        if (preg_match('/^254\d{9}$/', $phoneNumber)) {
            return $phoneNumber;
        }
        return 'Invalid phone number';
    }
    $formattedPhone = formatPhoneNumberPHP($phone);
    if ($formattedPhone === 'Invalid phone number') {
        echo json_encode(['error' => 'Invalid phone number']);
        exit;
    }

    // 原expresspay函数逻辑
    function expresspay($phone, $amount, $reference, $description, $remark) {
        $endpoint = "https://api.safaricom.co.ke/mpesa/stkpush/v1/processrequest";
        $timestamp = date("YmdHis");
        $password = base64_encode(tourmaster_get_option('payment', 'mpesa-shortcode', '').tourmaster_get_option('payment', 'mpesa-passkey', '').$timestamp);
        $curl_post_data = array(
            "BusinessShortCode" => tourmaster_get_option('payment', 'mpesa-shortcode', ''),
            "Password" => $password,
            "Timestamp" => $timestamp,
            "TransactionType" => tourmaster_get_option('payment', 'mpesa-live-mode', 'CustomerPayBillOnline'),
            "Amount" => round($amount),
            "PartyA" => $phone,
            "PartyB" => tourmaster_get_option('payment', 'mpesa-till', ''),
            "PhoneNumber" => $phone,
            "CallBackURL" => 'https://wildsafaris.co.ke/?tourmaster-payment',
            "AccountReference" => $reference,
            "TransactionDesc" => $description,
            "Remark" => $remark,
        );

        $token = token();
        $header = array("Content-Type:application/json", "Authorization:Bearer ".$token);

        return curlfunction($endpoint, $header, 'POST', json_encode($curl_post_data));
    }

    // 调用函数并返回结果
    $result = expresspay($formattedPhone, $amount, $item_name, "", "REMARKS");
    echo $result;
    exit;
}
?>

2. JavaScript部分

<script type="text/javascript">
(function($) {
    $('#pay').click(function() {
        // 客户端手机号格式化
        function formatPhoneNumber(phoneNumber) {
            phoneNumber = phoneNumber.replace(/\s/g, '');
            if (/^0\d{9}$/.test(phoneNumber)) {
                return '254' + phoneNumber.substr(1);
            }
            if (/^[1-9]\d{8}$/.test(phoneNumber)) {
                return '254' + phoneNumber;
            }
            if (/^254\d{9}$/.test(phoneNumber)) {
                return phoneNumber;
            }
            return 'Invalid phone number';
        }

        var phone = $('#phone').val();
        var item_name = $('#item_name').val();
        var amount = $('#amount').val();
        var formattedPhone = formatPhoneNumber(phone);

        // 先验证手机号格式
        if (formattedPhone === 'Invalid phone number') {
            alert('Invalid phone number');
            return;
        }

        // 发送AJAX请求
        $.ajax({
            url: window.location.href, // 若用单独PHP文件则改为'./mpesa_pay.php'
            type: 'POST',
            data: {
                phone: formattedPhone,
                amount: amount,
                item_name: item_name
            },
            success: function(response) {
                try {
                    var jsonResponse = JSON.parse(response);
                    alert(JSON.stringify(jsonResponse));
                    // 这里可添加后续逻辑，比如展示支付状态
                } catch(e) {
                    alert('请求失败：' + response);
                }
            },
            error: function(xhr, status, error) {
                alert('请求出错：' + error);
            }
        });
    });
})(jQuery);
</script>

关键说明 #

• 现在PHP只会在收到AJAX POST请求时才执行expresspay，能准确获取用户输入的真实参数
• 手机号在客户端和服务端做双重格式化验证，避免无效参数传递
• AJAX回调里处理返回结果，确保拿到的是PHP处理后的真实响应

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