如何在#step3form表单中展示References支付生成的$reference数组值？

Alright, let's get that reference data showing up in your step 3 form—here's a straightforward, step-by-step solution:

1. Send the Reference Data from the Backend #

First, we need to pass the generated $reference array back to the frontend in your AJAX response. Right now, you're creating the reference but not including it in the JSON you return. Update your PHP method like this:

public function handlePaymentMethods(Request $request){
    $request->validate([
        'payment_method' => 'required',
    ]);
    $reference = null; // Initialize variable to avoid undefined errors
    
    if($request->payment_method == "references"){
        $payment_info = [
            't_value' => '10',
            'o_obs' => ''
        ];
        $payment = new Payment($payment_info);
        $reference = $payment->generateReferences();
    } 
    
    return response()->json([
        'success' => true,
        'message' => 'success',
        'payment_method' => $request->payment_method,
        'reference' => $reference // Add this line to send reference data to frontend
    ], 200);
}

2. Render the Reference Data in the Frontend #

Next, update your JavaScript success callback to take the returned reference data and inject it into the #references_section. The exact HTML structure depends on what your $reference array contains—here are two common scenarios:

Scenario A: $reference is an array of reference numbers (e.g., ['REF001', 'REF002'])

success: function (data, textStatus, jqXHR) {
    var result = data;
    $("#credit_card_section").hide();
    $("#references_section").hide();

    if(result['payment_method'] == 'credit_card'){
        $("#credit_card_section").show();
    }else{
        $("#references_section").show();
        var referenceData = result.reference;
        let html = '';
        
        if(Array.isArray(referenceData) && referenceData.length > 0){
            html += '<h6>Your Payment References</h6>';
            html += '<ul class="list-group">';
            referenceData.forEach(ref => {
                html += `<li class="list-group-item">${ref}</li>`;
            });
            html += '</ul>';
        } else {
            html += '<p>No reference data available.</p>';
        }
        
        // Insert the generated HTML into the section
        $("#references_section").html(html);
    }
    
    var $active = $('.nav-pills li a.active');
    nextTab($active);
},

Scenario B: $reference is an object with key-value pairs (e.g., ['ref_number' => 'REF123', 'due_date' => '2024-12-31', 'amount' => '10.00'])

success: function (data, textStatus, jqXHR) {
    var result = data;
    $("#credit_card_section").hide();
    $("#references_section").hide();

    if(result['payment_method'] == 'credit_card'){
        $("#credit_card_section").show();
    }else{
        $("#references_section").show();
        var referenceData = result.reference;
        let html = '';
        
        if(referenceData && typeof referenceData === 'object'){
            html += '<div class="card">';
            html += '<div class="card-body">';
            html += '<h5 class="card-title">Payment Reference Details</h5>';
            for(const key in referenceData){
                html += `<p class="card-text"><strong>${key.replace('_', ' ')}:</strong> ${referenceData[key]}</p>`;
            }
            html += '</div></div>';
        } else {
            html += '<p>No reference data available.</p>';
        }
        
        $("#references_section").html(html);
    }
    
    var $active = $('.nav-pills li a.active');
    nextTab($active);
},

Quick Notes #

• Make sure $payment->generateReferences() returns a JSON-serializable structure (array or plain object). If it returns an Eloquent model, use $reference->toArray() to convert it.
• Adjust the HTML classes (like list-group, card) to match your project's styling framework (Bootstrap, etc.) for consistency.

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