Laravel －如何包含外部JS文件（包含Ajax）

Question

我使用ajax发布我选择的值。 使用以下代码可以正常工作。 我想将jvascript文件与index.blade.php分开 。

web.php

Route::get('Homepage', function (){
    return view('frontend.index');
});

Route::post('Homepage/filter', 'Frontend\ImgListController@filter')
    ->name('Homepage.filter');

控制者

function filter(Request $request)
    {    
        $get_Model = $request->get('Model');
        Log::debug($get_Model);    
    }

如果我有如下所示的“查看”代码，则可以将所选值正确地发布到url：“ {{route（'Homepage.filter'）}}”。

index.blade.php

<html>
<head></head>    
<body>
   <div class="form-group">
      <select name="Model" id="Model">
         <option value="">Select Model</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
      </select>

      <button class="btn" onclick="Fun();">submit</button>

   </div>

   {{ csrf_field() }}

   <script src="{{ asset('jquery/jquery.min.js') }}"></script>

</body>
</html>

<script>
   function Fun() {
     if ($('#Model').val() != '') {
       var model_value = $('#Model').val();

       $.ajax({
         url: "{{ route('Homepage.filter') }}",
         type: "POST",
         data: {
             Model: model_value,
             _token: '{{csrf_token()}}'
         },
         success: function (result) {
         //
         }
       })    
     }    
  }
</script>

但是，当我尝试将此<script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script>到index.blade.php时 ，并且独立于jvascript文件（public \\ js \\ JS.js）之外。 我将收到以下错误消息。

POST http：// localhost：8888 /％7B％7B％20route（'Homepage.filter'）％20％7D％7D 404（未找到）

index.blade.php（已修改，并且出现错误）

<html>
<head></head>    
<body>
   <div class="form-group">
      <select name="Model" id="Model">
         <option value="">Select Model</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
      </select>

      <button class="btn" onclick="Fun();">submit</button>

   </div>

   {{ csrf_field() }}

   <script src="{{ asset('jquery/jquery.min.js') }}"></script>
   <script type="text/javascript" src="{{ URL::asset('js/JS.js') }}"></script>

</body>
</html>

javascript

function Fun() {
    if ($('#Model').val() != '') {
        var model_value = $('#Model').val();

        $.ajax({
            url: "{{ route('Homepage.filter') }}",
            type: "POST",
            data: {
                Model: model_value,
                _token: '{{csrf_token()}}'
            },
            success: function (result) {
                //
            }
        })
    }
}

路线{{route（'Homepage.filter'）}}是错的吗？ 还是其他？ 我该怎么做才能纠正它？ 谢谢！

Answer 1

您不能在.js文件中编写laravel刀片语法。

所以你不能给ajax url提供直接的路由名称

您可以将其称为直接放置路线的网址。

对于通行证令牌数据，

只需将令牌放在html头内的meta标记中

<meta name="csrf-token" content="{{ csrf_token() }}">

然后您可以将令牌数据附加到您的js中

function Fun() {
    if ($('#Model').val() != '') {
        var model_value = $('#Model').val();
        var token = $('meta[name="csrf_token"]').attr('content'),
        $.ajax({
            url: "/Homepage/filter",
            type: "POST",

            data: {
                Model: model_value,
                _token: token 
            },
            success: function (result) {
                //
            }
        })
    }
}

Answer 2

您可以通过以下方式进行操作：

将以下行添加到您的主布局文件中。

@stack('scripts')

而不是放在索引文件末尾的脚本下面。

@push('scripts')
     <script src="{{ asset('assets/js/JS.js')}}"></script>
@endpush

Laravel －如何包含外部JS文件（包含Ajax）

问题描述

web.php

控制者

index.blade.php

index.blade.php（已修改，并且出现错误）

javascript

2 个解决方案

解决方案1
3 已采纳 2018-11-12 08:43:55

解决方案2
1 2018-11-12 08:41:29

Laravel －如何包含外部JS文件（包含Ajax）

问题描述

web.php

控制者

index.blade.php

index.blade.php（已修改，并且出现错误）

javascript

2 个解决方案

解决方案1 3 已采纳 2018-11-12 08:43:55

解决方案2 1 2018-11-12 08:41:29

解决方案1
3 已采纳 2018-11-12 08:43:55

解决方案2
1 2018-11-12 08:41:29