Laravel － How to include External JS file (contains Ajax )
Question
I use ajax to post the value I selected. It works fine with the following code. And I want to separate the jvascript file from index.blade.php .
web.php
Route::get('Homepage', function (){
return view('frontend.index');
});
Route::post('Homepage/filter', 'Frontend\ImgListController@filter')
->name('Homepage.filter');
controller
function filter(Request $request)
{
$get_Model = $request->get('Model');
Log::debug($get_Model);
}
If I have my "view" code like the below, the selected value can be correctly post to the 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>
However, when I try to add this <script type="text/javascript" src="{{ URL::asset('js/jquery.js') }}"></script> into index.blade.php , and independently out of a jvascript file (public\\js\\JS.js). I would get error message bellow.
POST http://localhost:8888/%7B%7B%20route ('Homepage.filter')%20%7D%7D 404 (Not Found)
index.blade.php (Modified, and somewhere wrong)
<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) {
//
}
})
}
}
The route {{ route('Homepage.filter') }} is wrong? Or anything else? What can I do to correct it ? Thanks!
2 answers
solution1
3 ACCPTED 2018-11-12 08:43:55
You cant write laravel blade syntax inside .js file.
so you cant give direct route name for ajax url
you can call this direct putting the URL of route.
and for pass token data,
just place the token in your meta tag inside head of html
<meta name="csrf-token" content="{{ csrf_token() }}">
and then you can attach the token data in your 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) {
//
}
})
}
}
solution2
1 2018-11-12 08:41:29
You can do by this way :
Add below line into your main layout file.
@stack('scripts')
than put below script at end of your index file.
@push('scripts')
<script src="{{ asset('assets/js/JS.js')}}"></script>
@endpush
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.