404 not found when passing variable to route in laravel - php

Question

I'm trying to run an ajax call, and i keep getting
http://127.0.0.1:8000/books/rate/2 404 (Not Found)
So it gets the id well, but showing a 404 error.
route.php
Route::post('rate/{book_id}','BookController#rate')->name('rate');
main.js
$('#sub').submit(function(e){
var owl = $(this).attr("data");
var route = JSON.parse(owl);
$.ajax({
type:"POST",
url:"rate/" + route.id,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(res){
console.log("owls");
}
});
event.preventDefault();
});
controller(book controller)
public function rate(Request $request, $book_id)
{
$book = Book::find($book_id);
$rating = $book->ratings()->where('user_id', auth()->user()->id)->first();
if(is_null($rating)){
$ratings = new Rating();
$ratings->rating = $request['rating'];
$ratings->user_id = auth()->user()->id;
$book->ratings()->save($ratings);
return json_encode($book);
}
else{
return redirect()->back()->with("status", "You already left a review");
}
}
HTML
<form id="sub" data= "{{ $book }}">
{!! csrf_field() !!}
<div id="rateYo" data-rateyo-rating="{{ $book->userSumRating or 0}}"> ></div>
<input name="rating" value='{{ $book->userSumRating or 0 }}' type="hidden" id="val">
<button type="submit" class="btn btn-primary mt-2">submit</button>
</form>

Answer 1

You are using ajax post so instead redirect use json response like this
public function rate(Request $request, $book_id)
{
$book = Book::find($book_id);
$rating = $book->ratings()->where('user_id', auth()->user()->id)->first();
if(is_null($rating)){
$ratings = new Rating();
$ratings->rating = $request['rating'];
$ratings->user_id = auth()->user()->id;
$book->ratings()->save($ratings);
return json_encode($book);
}
else{
return response()->json(['status' => "You already left a review"]);
}
}
Add try this javascript code
$.ajax({
type:"POST",
url:"http://127.0.0.1:8000/rate/" + route.id,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data:{rating: $('#val').val()},
success:function(res){
console.log("owls");
}
});

Answer 2

I think you need a change in javascript like below
$('#sub').submit(function(e){
var owl = $(this).attr("data");
var route = JSON.parse(owl);
$.ajax({
type:"POST",
url:"http://127.0.0.1:8000/rate/" + route.id,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function(res){
console.log("owls");
}
});
event.preventDefault();
});
This is because in your URL you are getting books before rate/{rate_id} thats why it is showing error of 404 page not found!

Answer 3

Just Use It Like This :-
$.ajax({
type:"POST",
url:"{{url('rate/')}}" + route.id,
headers: {
'X-CSRF-TOKEN': {{ csrf_token() }}
},
success:function(res){
console.log("owls");
}
});