Getting 500 Internal issue during ajax response - php

Question

I am struggling with this code. I am unable to send a response with ajax.
Ajax script is here.
$(document).ready(function () {
$('#selectSize').change(function () {
var idSize = $(this).val();
$.ajax({
type: "get",
dataType: 'json',
url: 'getproductprice',
data: {
idSize: idSize
},
success: function (response) {
console.log("working");
},
error: function () {
console.log("error");
}
});
});
});
Here is the Blade markup
<select name="size" id="selectSize" style="width:150px;">
<option value="">Select Size</option>
#foreach($productDetails->attributes as $size)
<option value="{{$productDetails->id}}-{{$size->size}}">{{$size->size}}</option>
#endforeach
</select>
And here is the controller code
public function getProductPrice(Request $request)
{
$data = $request->all();
$proArr = explode("-", $data['idsize']);
$proAttr = ProductsAttribute::where(['product_id' => $proArr[0], 'size' => $proArr[1]])->first();
$getCurrencyRates = Product::getCurrencyRates($proAttr->price);
echo $proAttr->price . "-" . $getCurrencyRates['USD_Rate'] . "-" . $getCurrencyRates['GBP_Rate'] . "-" . $getCurrencyRates['EUR_Rate'];
echo "#";
echo $proAttr->stock;
}
I do not know, What I am doing wrong .when I select option value.
error will come like.
"Trying to get property 'image' of non-object (View:
C:\xampp\htdocs\wrost\resources\views\shop\product-details.blade.php)"

Answer 1

Your ajax should be -
$.ajax({
url: 'getproductprice',
type: 'POST',
data: {idSize: idSize},
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function (response) {
console.log(response);
},
error: function (err) {
console.log(err);
alert("Something Went Wrong, Please check again");
}
});

Answer 2

First make sure you add meta tag for csrf in your head
<meta name="csrf-token" content="{{ csrf_token() }}">
At last you need to add header object in your ajax object
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
it will be like this
$.ajax({
type: "get",
dataType : 'json',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url:'getproductprice',
data: {idSize: idSize},
success:function(response){
console.log("working");
},
error:function(){
console.log("error");
}
});