Ajax Request Return HTML Page - ajax

Question

I am trying to send data from an Input to the controller of my application in Laravel, where I supply the category ID and it returns a jSON with the related id's.
I have a input to get data
<label for="categoryMae">Nome da Categoria Mãe</label>
<input class="form-control" id="getCategoryMae" name="getCategoryMae" />
A script to pass to my controller
<script>
$("#getCategoryMae").blur(function(){
var cat_id = $(this).val();
console.log(cat_id);
$.ajax({
type: 'GET',
url: '{{route('getCategoryName')}}',
data: 'cat_id',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log(data.cat_id);
}
});
});
</script>
and I trying to get this values in my Controller (Route::get('/categories/getCategoryName', 'CategoriesController#getCategoryName')->name('getCategoryName');)
public function getCategoryName(Request $request)
{
$data = $request->all();
dd($data);
}
But the code returns the HTML structure and not the the value
How return only the value and not all that structure and why that happened? Thanks in advance!

Answer 1

I don't think you're sending any data to your controller. Try this, check the data property of the AJAX call.
<script>
$("#getCategoryMae").blur(function(){
var cat_id = $(this).val();
console.log(cat_id);
var dataObject = {cat_id: cat_id};
$.ajax({
type: 'GET',
url: '{{route('getCategoryName')}}',
data: dataObject,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log(data.cat_id);
}
});
});
</script>
Also, I can tell you use Google Chrome, you can make sure you send something to the server, you can click on the Headers, go to the bottom to the Query String Prameters to see the parameters you're sending.
Here's a good resource: Chrome Dev Tools