javascript - Laravel - 如何包含外部JS文件(包含Ajax)

标签 javascript php laravel

我使用 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 (Not Found)

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') }} 错了吗?或者别的什么?我该怎么做才能纠正它?谢谢!

最佳答案

你不能在 .js 文件中编写 laravel blade 语法。

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

你可以直接把路由的URL调用这个。

对于通证 token 数据,

只需将标记放在 html 头部的元标记中

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

然后你可以在你的js中附加token数据

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) {
                //
            }
        })
    }
}

关于javascript - Laravel - 如何包含外部JS文件(包含Ajax),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53258379/

相关文章:

php - Laravel 护照 : Create access token manually

php - Model.php 行 827 : Class not found 中的 Laravel FatalErrorException

javascript - 错误 TS2307 : Cannot find module (external, 私有(private)模块)

javascript - 使用 jQuery 选择并包装某个字符串的所有出现

javascript - 如何将 id 唯一地设置为在 php 中动态生成的可通过 javascript 代码访问的按钮

php - 按顺序列出项目的最佳方式

javascript - 优化 Angular 8 中的简单图像轮播

javascript - 尝试使用 javascript 通过单击图像来设置图像的不透明度,但不断收到错误

php - 获取 Youtube LiveChatMessages 列表的 Guzzle 请求

php - 拉拉维尔 9 : how to use enums in blade (<select>)?