如何将数组数据从控制器发送到刀片并访问 javascript 变量中的数据

Question

我正在使用 Laravel 6。我有一个控制器，在提交表单后收集数据，从收集的数据中，我想使用一些数据将其发送到可以收集付款的不同页面。

这是我的代码

//data collected from form for storing in database and sending to payment gateway
public function store()  
{
    $user = auth()->user();
    $amount = 1200;
    $orderid = time() . '-' . $user->id;

    auth()->user()->details()->create([
        'name' => $data['name'],
        'orderID' => $orderid,
        'reptype' => $data['reptype'],
        'gender' => $data['gender'],
        'email' => $data['email'],
        'phone' => $data['phone'],
    ]);

    $api = new Api(config('app.razorpay'), config('app.razorsecret'));

    $orderData = [
        'receipt'         => $orderid,
        'amount'          => $amount, // 2000 rupees in paise
        'currency'        => 'INR',
        'payment_capture' => 1 // auto capture
    ];

    //create a new order id on payment gateway
    $razorpayOrder = $api->order->create($orderData);

    //collect order ID
    $razorpayOrderId = $razorpayOrder['id'];

    //data to be sent for payment collection
    $pay = [       
        "amount"            => $amount,
        "name"              => "test name",
        "description"       => "",
        "image"             => "https://s29.postimg.org/r6dj1g85z/daft_punk.jpg",
        "prefill"           => [
            "name"              => "Daft Punk",
            "email"             => "customer@merchant.com",
            "contact"           => "9999999999",
        ],
        "notes"             => [
            "address"           => "Hello World",
            "merchant_order_id" => $orderid,   //order id which I have generated
        ],
        "order_id"          => $razorpayOrderId,  //order id provided by gateway
    ];

        return redirect()->route( 'pay')->with($pay);  // I would like to send data from this redirect to a blade where I can initiate payment process.
}

我的问题是我想将$pay 数组数据发送到路由pay，其中$pay 数组数据应该可供java 脚本代码访问。当我尝试这样做时，我收到一条消息说变量不可用。

Answer 1

您可以通过两种方式解决此问题：

1。回显变量。

// in your blade file
<script>
let pay = JSON.parse('{{ @json($pay) }}');
</script>

这种方法的问题是它只能在刀片文件中使用，并且取决于您在将pay 用于其他地方之前对其进行实例化。

2 使用属性、data-* 属性或隐藏输入来存储数据，然后检索它。

<!-- hidden input value example -->
<input id="pay-data" type="hidden" value='@json($pay)'>
<!-- attribute example -->
<span id="pay-data" type="hidden" someattribute='@json($pay)' style="display:none;"></span>
<!-- data-* attribute example -->
<span id="pay-data" type="hidden" data-payment='@json($pay)' style="display:none;"></span>

使用单引号 (') 很重要。不要在 @json 助手中使用双引号 (")。

// vanilla js - value example
let pay = JSON.parse(document.getElementById('pay-data').value);
// jquery - value example
let pay = JSON.parse($('#pay-data').val());
// vanilla js - attribute example
let pay = JSON.parse(document.getElementById('pay-data').getAttribute('someattribute'));
// jquery - attribute example
let pay = JSON.parse($('#pay-data').attr('someattribute'));
// vanilla js - data-* attribute example
let pay = JSON.parse(document.getElementById('pay-data').dataset.payment);
// jquery - data-* attribute example
let pay = JSON.parse($('#pay-data').data('payment'));

这样做有一个缺点。 json 数据公开给任何想要检查 html 代码的人。

3 通过 ajax 调用获取数据。

就个人而言，我更喜欢选项 2 或 3，因为我不喜欢将我的 JS 与刀片文件混合在一起。