阿贾克斯不工作

Question

I have following code in my view

$(document).ready(function(){
     $("#mySelect").on('change',  function () {
        $.ajax({
          url: 'list-of-product-one',
          type: "get",
          data: {'id':$(this).val()},
          success: function(data){
          console.log(data);
        }
    });        

<select class="form-control"  id="mySelect" name="cat_id" >             
   @foreach($category_list as $data)
      <option value="{{$data->id}}">{{$data->cat_name}}</option>
   @endforeach 
</select>

and in my controller

public function ProductListGet(Request $request)
{
    $category_list=Category::all();
    $list_of_product=Product::where('cat_name','=',$request->id)->get();
    return view('manager/list_of_product',['list_of_product'=>$list_of_product,'category_list'=>$category_list]);
}

if I run that then it throws an error in my web browser console like

GET XHR http://localhost/poet/public/manager/list-of-product-one [HTTP/1.0 500 Internal Server Error 156ms]

so I changed return in my controller like

 return json_encode($list_of_product);

then it displays the json array in my console even if return without

 $list_of_product=Product::where('cat_name','=',$request->id)->get();

this condition then it will return whole page

now my question is suppose if I have condition in my controller then how can I return my view ?

Answer 1

GET XHR http://localhost/poet/public/manager/list-of-product-one [HTTP/1.0 500 Internal Server Error 156ms]

Looks like you forgot send the _token. Add the following meta tag into the header section:

<meta name="csrf-token" content="{{ csrf_token() }}">

Now, send the token into the ajax request:

$(document).ready(function(){

     // here you prepare the token
     $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

     $("#mySelect").on('change',  function () {
        $.ajax({
          url: 'list-of-product-one',
          type: "get",
          data: {'id':$(this).val()},
          success: function(data){
          console.log(data);
     }
}); 

this condition then it will return whole page

In other hand, you should check your view content because the use of @extends('layout') makes return the content of the entire template. Just put html's markup as simple without extending the template.