在 Blade 模板中将 PHP 变量传递给 JavaScript

Question

JavaScript 有什么方法可以从 Laravel Blade 模板中的控制器获取变量？

示例： 我有以下代码：

$langs = Language::all();
return View::make('NAATIMockTest.Admin.Language.index',compact('langs'));

我可以获取$langs 并将其传递给 JavaScript 吗？我已经用过PHP-Vars-To-Js-Transformer。但是当我将JavaScript::put() 用于控制器中的两个功能时。它没有用。有什么帮助吗？

这是我在控制器中的创建函数：

public function create()
{
    $names = $this->initLang();
    Javascript::put([
        'langs' => $names
    ]);
    
    return View::make('NAATIMockTest.Admin.Language.create',compact('names'));
}

这是我的看法：

@extends('AdLayout')
@section('content')
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('langCtrl', function($scope) {
        $scope.languages = langs;
    });
</script>
    
<div class="container-fluid" ng-app="myApp" ng-controller="langCtrl">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2>Create language</h2>
                </div>
                    
                <div class="panel-body">
                    {!! Form::open() !!}
                        <p class="text-center">
                            {!! Form::label('Name','Language: ') !!}
                            <input type="text" name="searchLanguage" ng-model="searchLanguage">
                        </p>
    
                        <select name="Name[]" multiple size="10" ng-model="lang" ng-click="show()">
                            <option value="@{{v}}" ng-repeat="(k,v) in languages | filter:searchLanguage">
                                @{{v}}
                            </option>
                        </select><br>
    
                        <div class="text-center">
                            {!! Form::submit('Create',['class'=>'btn btn-primary']) !!}&nbsp;
                            {!!   Html::linkAction('NAATIMockTest\LanguageController@index', 'Back', null, array('class' => 'btn btn-primary')) !!}
                        </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

我在配置文件夹中的 javascript.php：

<?php
return [
    'bind_js_vars_to_this_view' => 'footer',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.create',
    'bind_js_vars_to_this_view' => 'NAATIMockTest.Admin.Language.edit',
    
    'js_namespace' => 'window',
];

这个想法是： 我在 MySQL 中有一种表语言。我想显示具有多个属性的下拉列表可供选择，并且我也想使用 angularjs 进行搜索。这就是为什么我想将变量从控制器传递给 JavaScript。此外，我在 LanguageController 中有一个名为 initLang 的函数来检查数据库中是否存在任何语言，它不会显示在创建视图的下拉列表中。

Answer 1

$langs = Language::all()->toArray();
return View::make('NAATIMockTest.Admin.Language.index', [
    'langs' => $langs
]);

然后在视图中

<script type="text/javascript">
    var langs = {{json_encode($langs)}};
    console.log(langs);
</script>

不好看

Answer 2

对我来说是一个工作示例。

控制器：

public function tableView()
{
    $sites = Site::all();
    return view('main.table', compact('sites'));
}

查看：

<script>    
    var sites = {!! json_encode($sites->toArray()) !!};
</script>

为防止恶意/意外行为，您可以按照 Jon 在链接到此 SO answer 的评论中的建议使用 JSON_HEX_TAG

<script>    
    var sites = {!! json_encode($sites->toArray(), JSON_HEX_TAG) !!};
</script>

Answer 3

假设您有一个名为$services 的集合，您将其传递给视图。

如果您需要一个带有名称的 JS 数组，您可以按如下方式对其进行迭代：

<script>
    const myServices = [];
    @foreach ($services as $service)
        myServices.push('{{ $service->name }}');
    @endforeach
</script>

注意：如果字符串有特殊字符（如ó或HTML代码），您可以使用{!! $service->name !!}。

如果您需要一个对象数组（包含所有属性），您可以使用：

<script>
  const myServices = @json($services);
  // ...
</script>

注意：这个刀片指令 @json 不适用于旧 Laravel 版本。您可以使用 json_encode 获得相同的结果，如其他答案中所述。

---

有时您不需要将完整的集合传递给视图，只需传递一个具有 1 个属性的数组即可。如果是这种情况，最好在 Controller 中使用 $services = Service::pluck('name');。

Answer 4

标准 PHP 对象

向 JavaScript 提供 PHP 变量的最佳方式是 json_encode。使用 Blade 时，您可以这样做：

<script>
    var bool = {!! json_encode($bool) !!};
    var int = {!! json_encode($int) !!};
    /* ... */
    var array = {!! json_encode($array_without_keys) !!};
    var object = {!! json_encode($array_with_keys) !!};
    var object = {!! json_encode($stdClass) !!};
</script>

• Displaying unescaped data - Laravel docs
• json_encode - PHP docs

还有一个用于解码为 JSON 的 Blade 指令。我不确定从哪个版本的 Laravel 但在 5.5 中可用。像下面这样使用它：

<script>
    var array = @json($array);
</script>

• Blade Templates - Laravel 5.5 docs

Jsonable 的

当使用 Laravel 对象时，例如Collection 或 Model 你应该使用 ->toJson() 方法。所有那些实现\Illuminate\Contracts\Support\Jsonable 接口的类都支持这个方法调用。呼叫自动返回JSON。

<script>
    var collection = {!! $collection->toJson() !!};
    var model = {!! $model->toJson() !!};
</script>

使用Model 类时，您可以在class 中定义$hidden 属性，这些属性将在JSON 中过滤。正如其名称所描述的，$hidden 属性隐藏了敏感内容。所以这个机制对我来说是最好的。像下面这样：

class User extends Model
{
    /* ... */

    protected $hidden = [
        'password', 'ip_address' /* , ... */
    ];

    /* ... */
}

在你视野中的某个地方

<script>
    var user = {!! $user->toJson() !!};
</script>

• Serializing to JSON - Laravel docs

Answer 5

试试这个 - https://github.com/laracasts/PHP-Vars-To-Js-Transformer 是将 PHP 变量附加到 Javascript 的简单方法。

Answer 6

很简单，我用这个代码：

控制器：

$langs = Language::all()->toArray();
return view('NAATIMockTest.Admin.Language.index', compact('langs'));

查看：

<script type="text/javascript">
    var langs = <?php echo json_decode($langs); ?>;
    console.log(langs);
</script>

希望对您有所帮助，问候！

Answer 7

最好的办法是把它放在php刀片中的一个隐藏的div中

<div hidden id="token">{{$token}}</div>

然后在 javascript 中将其作为常量调用以避免未定义的 var 错误

const token = document.querySelector('div[id=token]').textContent

// console.log(token)
// eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiI5MjNlOTcyMi02N2NmLTQ4M2UtYTk4Mi01YmE5YTI0Y2M2MzMiLCJqdGkiOiI2Y2I1ZGRhNzRhZjNhYTkwNzA3ZjMzMDFiYjBiZDUzNTZjNjYxMGUyZWJlNmYzOTI5NzBmMjNjNDdiNjhjY2FiYjI0ZWVmMzYwZmNiZDBmNyIsImlhdCI6IjE2MDgwODMyNTYuNTE2NjE4IiwibmJmIjoiMTYwODA4MzI1Ni41MTY2MjUiLCJleHAiOiIxNjIzODA4MDU2LjMxMTg5NSIsInN1YiI6IjUiLCJzY29wZXMiOlsiYWRtaW4iXX0.GbKZ8CIjt3otzFyE5aZEkNBCtn75ApIfS6QbnD6z0nxDjycknQaQYz2EGems9Z3Qjabe5PA9zL1mVnycCieeQfpLvWL9xDu9hKkIMs006Sznrp8gWy6JK8qX4Xx3GkzWEx8Z7ZZmhsKUgEyRkqnKJ-1BqC2tTiTBqBAO6pK_Pz7H74gV95dsMiys9afPKP5ztW93kwaC-pj4h-vv-GftXXc6XDnUhTppT4qxn1r2Hf7k-NXE_IHq4ZPb20LRXboH0RnbJgq2JA1E3WFX5_a6FeWJvLlLnGGNOT0ocdNZq7nTGWwfocHlv6pH0NFaKa3hLoRh79d5KO_nysPVCDt7jYOMnpiq8ybIbe3oYjlWyk_rdQ9067bnsfxyexQwLC3IJpAH27Az8FQuOQMZg2HJhK8WtWUph5bsYUU0O2uPG8HY9922yTGYwzeMEdAqBss85jdpMNuECtlIFM1Pc4S-0nrCtBE_tNXn8ATDrm6FecdSK8KnnrCOSsZhR04MvTyznqCMAnKtN_vMDpmIAmPd181UanjO_kxR7QIlsEmT_UhM1MBmyfdIEvHkgLgUdUouonjQNvOKwCrrgDkP0hkZQff-iuHPwpL-CUjw7GPa70lp-TIDhfei8T90RkAXte1XKv7ku3sgENHTwPrL9QSrNtdc5MfB9AbUV-tFMJn9T7k

Answer 8

这很简单，对我有用...

只需将 PHP 变量传递到单引号中...

<script>
    var collection = '{{ $collection }}';
</script>

Answer 9

在控制器中

 $langs = Language::all();
 return View::make('NAATIMockTest.Admin.Language.index',compact('langs'))

有时您可能会将数组传递给您的视图，以将其呈现为 JSON 以初始化 JavaScript 变量。

可见

<script>
    var app = <?php echo json_encode($langs); ?>;
    console.log($langs);
</script>

这里是官方参考enter link description here

Answer 10

查看

<script>  
       var langs = JSON.parse({!! json_encode($langs) !!});
</script>