Laravel OTP表单提交后表格数据不显示问题求助

问题根源分析 #

1. 后端返回类型不匹配：AJAX请求期望获取JSON数据来更新页面，但当前后端返回的是完整视图HTML，而非订单数据。
2. AJAX成功回调未处理数据：即使后端返回正确数据，前端也没有逻辑将数据注入到表格单元格中。
3. 重复提交按钮冲突："Resend OTP"按钮是submit类型，会触发表单提交逻辑，而非单独的重发OTP操作。
4. 缺少必填参数验证：后端未对pbono参数做验证，可能导致API调用失败。
5. Blade语法无法客户端更新：表格中的{{$success['...']}}是服务端渲染变量，无法通过AJAX直接更新，需要DOM操作。

分步解决方案 #

1. 后端控制器修改（返回JSON响应）

将otp_check方法改为返回JSON数据，而非视图：

public function otp_check(Request $request){
    $this->validate($request, [
        'OTP' => 'required',
        'pbono' => 'required', // 新增必填参数验证
    ]);

    // 用参数数组替代URL拼接，更安全简洁
    $trackingResponse = Http::get('https://api.mgmotors.com.pk/api/orderTracking', [
        'pbono' => $request->pbono,
        'OTP' => $request->OTP
    ]);

    $success = json_decode($trackingResponse->getBody(), true);

    // 根据API返回结果返回对应JSON
    if (isset($success['Success']) && $success['Success']) {
        return response()->json([
            'Success' => true,
            'data' => $success
        ]);
    } else {
        return response()->json([
            'Success' => false,
            'error' => $success['error'] ?? 'Invalid OTP or PBO Number'
        ]);
    }
}

2. 前端AJAX逻辑更新

修改表单提交回调，实现表格数据动态填充：

$("#otpForm").submit(function (event) {
    event.preventDefault();
    const form = $(this);

    $.ajax({
        url: form.attr("action"),
        method: form.attr("method"),
        data: form.serialize(),
        dataType: 'json', // 明确指定接收JSON类型
        success: function (response) {
            if (response.Success) {
                // 填充表格数据
                $("#resultTable h5").text(response.data.Response || '');
                $("td:contains('Dealer Name')").next().text(response.data.Dealer || '');
                $("td:contains('PBO Number')").next().text(response.data.PBONo || '');
                $("td:contains('Booking Date')").next().text(response.data.BookingDate || '');
                $("td:contains('Variant Booked')").next().text(response.data.Variant || '');
                $("td:contains('Color Exterior')").next().text(response.data.Exterior || '');
                $("td:contains('Color Interior')").next().text(response.data.Interior || '');
                
                $("#resultTable").show();
                $("#order-error").hide();
            } else {
                $("#order-error").text(response.error).show();
                $("#resultTable").hide();
            }
        },
        error: function() {
            $("#order-error").text('Server error. Please try again later.').show();
            $("#resultTable").hide();
        }
    });

    form[0].reset();
});

3. 修复Resend OTP按钮

将按钮改为非submit类型，并添加独立的AJAX处理：
表单HTML修改：

<input type="button" class="btn btnPink TrackOrder mt-4" id="resendOtp" value="Resend OTP"/>

添加重发OTP逻辑：

$("#resendOtp").click(function() {
    const pbono = $("#pbono-hidden").val();
    
    if (!pbono) {
        $("#order-error").text('PBO Number is required to resend OTP.').show();
        return;
    }

    $.ajax({
        url: '/resend-otp', // 需要创建对应的路由和控制器方法
        method: 'GET',
        data: { pbono: pbono },
        dataType: 'json',
        success: function(response) {
            if (response.Success) {
                $("#order-error").text('OTP has been resent to your registered email.')
                    .removeClass('text-danger')
                    .addClass('text-success')
                    .show();
            } else {
                $("#order-error").text(response.error).show();
            }
        },
        error: function() {
            $("#order-error").text('Failed to resend OTP. Please try again.').show();
        }
    });
});

4. 表单属性清理

移除不必要的enctype属性（无文件上传需求）：

<form action="{{ URL::to('/orderTracking') }}" id="otpForm" method="GET" style="display:none">

5. 新增重发OTP后端支持

在web.php添加路由：

Route::get('/resend-otp', [OrderTrackingController::class, 'resend_otp']);

添加控制器方法：

public function resend_otp(Request $request){
    $this->validate($request, [
        'pbono' => 'required',
    ]);

    // 调用重发OTP的API接口
    $response = Http::get('https://api.mgmotors.com.pk/api/resend-otp', [
        'pbono' => $request->pbono
    ]);

    $result = json_decode($response->getBody(), true);

    return response()->json($result);
}

额外检查项 #

• 确认API返回结构包含Success字段及所需的订单数据字段
• 查看浏览器控制台是否有JavaScript错误
• 确保pbono-hidden输入框在提交前已正确赋值

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