title: Laravel － How to include External JS file (contains Ajax )
body: <p>I use ajax to post the value I selected. It works fine with the following code.
  And I want to separate the <strong>jvascript</strong> file from <strong>index.blade.php</strong>.</p>
  
  <h1><strong>web.php</strong></h1>
  
  <pre><code>Route::get('Homepage', function (){
      return view('frontend.index');
  });
  
  Route::post('Homepage/filter', 'Frontend\ImgListController@filter')
      -&gt;name('Homepage.filter');
  </code></pre>
  
  <h1><strong>controller</strong></h1>
  
  <pre><code>function filter(Request $request)
      {    
          $get_Model = $request-&gt;get('Model');
          Log::debug($get_Model);    
      }
  </code></pre>
  
  <p>If I have my "view" code like the below, the selected value can be correctly post to the url:"{{ route('Homepage.filter') }}".</p>
  
  <h1><strong>index.blade.php</strong></h1>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;    
  &lt;body&gt;
     &lt;div class="form-group"&gt;
        &lt;select name="Model" id="Model"&gt;
           &lt;option value=""&gt;Select Model&lt;/option&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
              &lt;option&gt;3&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;button class="btn" onclick="Fun();"&gt;submit&lt;/button&gt;
  
     &lt;/div&gt;
  
     {{ csrf_field() }}
  
     &lt;script src="{{ asset('jquery/jquery.min.js') }}"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script&gt;
     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) {
           //
           }
         })    
       }    
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>However, when I try to add this <code>&lt;script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"&gt;&lt;/script&gt;</code> into <strong>index.blade.php</strong>, and independently out of a jvascript file (public\js\JS.js).
  I would get error message bellow.</p>
  
  <blockquote>
    <p>POST <a href="http://localhost:8888/%7B%7B%20route" rel="nofollow noreferrer">http://localhost:8888/%7B%7B%20route</a>('Homepage.filter')%20%7D%7D
    404 (Not Found)</p>
  </blockquote>
  
  <h1>index.blade.php (Modified, and somewhere wrong)</h1>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;    
  &lt;body&gt;
     &lt;div class="form-group"&gt;
        &lt;select name="Model" id="Model"&gt;
           &lt;option value=""&gt;Select Model&lt;/option&gt;
              &lt;option&gt;1&lt;/option&gt;
              &lt;option&gt;2&lt;/option&gt;
              &lt;option&gt;3&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;button class="btn" onclick="Fun();"&gt;submit&lt;/button&gt;
  
     &lt;/div&gt;
  
     {{ csrf_field() }}
  
     &lt;script src="{{ asset('jquery/jquery.min.js') }}"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="{{ URL::asset('js/JS.js') }}"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h1>javascript</h1>
  
  <pre><code>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) {
                  //
              }
          })
      }
  }
  </code></pre>
  
  <p>The route <em>{{ route('Homepage.filter') }}</em> is wrong? Or anything else? What can I do to correct it ? Thanks!</p>