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

Posted 2023-03-14

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

【英文标题】：how can I send array data from controller to a blade and access the data in javascript variable

【发布时间】：2020-08-16 05:23:23

【问题描述】：

我正在使用 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"             => "[e-mail]",
            "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 脚本代码访问。当我尝试这样做时，我收到一条消息说变量不可用。

【问题讨论】：

您可以通过以下方式在javascript中访问：var variable= $pay;

我试过了，它说变量未定义

试试：return redirect()->route( 'pay', ['pay' => $pay['order_id']]);

我唯一能成功让 javascript 接受数组的是 var pay = !! $pay !!。您可能还需要将其包装在 json_decode 中。所以应该是!! json_decode($pay) !! 我不在我的开发终端测试，但我认为这是准确的

@maximus1127 这是向刀片发送数据的正确方法 return redirect()->route( 'pay')->with($pay);

【参考方案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 与刀片文件混合在一起。

【讨论】：

我仍然很困惑哪种方法是从控制器 1 发送数据的正确方法。 return view('pay', compact('pay'));通过视图或 2.return redirect()->route('pay')->with($pay);

view('pay', compact('pay')) 等价于view('pay', ['pay' => $pay]) 或view('pay')->with('pay', $pay)。选择一个你喜欢的并坚持下去。

我认为我需要先将数组数据转换为 JSON，然后才能正确地遵循您的一种方法？

不，@json 助手会处理这个问题。

这是一个语法错误。检查它来自哪个文件和行。错误应该告诉你这一点。