Laravel 5使用AJAX的jQuery

Question

I'm using Laravel 5 and I'm doing some filters on some collections in my controller. The problem is using AJAX to be the bridge between the blade template and Controller. Here is my jQuery code:

function listCreatedBy(str) {
        $.ajax({
          headers : {
             'csrftoken' : '{{ csrf_token() }}'
          },
          url: '{{ url("search") }}',
          type: "get", //send it through get method
          data:{txt:str},
          success: function(response) {
            console.log("ola");
            $('#results').html(response);
          },
          error: function(xhr) {
            console.log(xhr);
          }
        });
    }

Here is my route:

Route::get('/search/{txt}', 'PrestashopController@search')->name('search');

And here is my method in the controller:

public function search($searchText){
    var_dump($searchText);

    return "results"; //Just to see if it's returning correctly
}

This method is empty for now because I only want to see if I can complete the ajax code first. But it's returning a 404 code, Not Found. Any idea what I'm doing wrong?

Answer 1

Add this to your ajax call

headers : {
    'csrftoken' : '{{ csrf_token() }}'
}

edit

i see you use the route

Route::("/search/{txt}" ...

Witch corresponds to

http://example.com/search/random%20text

What is probably happening is that you're using the route wrong the ajax call you're making will create an uri like this

http://example.com/search/?txt=some%20text

try this

$.ajax({
      headers : {
         'csrftoken' : '{{ csrf_token() }}'
      },
      url: "{{ url("search") }}/" + encodeURIComponent(str),
      type: "get", //send it through get method
      success: function(response) {
        console.log("ola");
        $('#results').html(response);
      },
      error: function(xhr) {
        console.log(xhr);
      }
});

Answer 2

I think you have typo error.

Route::get('/search/{$txt}'

try without $

Route::get('/search/{txt}',...

One more..try to use in the controller method this code in the scopes, not $searchtext.

public function search(Request $request)

and after that access to the $txt variable like this

$test = $request->get('txt');
var_dump($test

);

and in jQuery code use this:

function listCreatedBy(str) {
       var query_url = '{{ url("search") }}' + str;
        $.ajax({
          url: query_url ,
          type: "get", //send it through get method
          success: function(response) {
            console.log("ola");
            $('#results').html(response);
          },
          error: function(xhr) {
            console.log(xhr);
          }
        });
    }

NOTE: csrftoken is for submit forms

Answer 3

Try to do like this

$.ajax({
  url: "/search/"+str,
  type: "GET",
  data:'',
  success: function(response) {
    document.getElementById("results").innerHTML = this.responseText;
  },
  error: function(xhr) {
    console.log(xhr);
  }
});

Route::get('/search/{txt}', 'PrestashopController@getSearch');

public function getSearch($searchText){
  dd($searchText);
  return "results"; //Just to see if it's returning correctly
}

Answer 4

Try this:

$.ajax({
  url: '{{ url("/route_name") }}',  
  // here route_name is a named route that call a controller function
  type: "get", //send it through get method
  data:{txt:str},
  success: function(response) {
    $('#results').html(response);
  },
  error: function(xhr) {
    console.log(xhr);
  }
});

Answer 5

try with the full-Path URL..

 url: '{{ url("/search") }}',  

let your AJAX be like this..

 $.ajax({
          url: '{{ url("/search") }}',
          type: "get", //send it through get method
          data:{txt:str},
          success: function(response) {
            document.getElementById("results").innerHTML = this.responseText;
          },
          error: function(xhr) {
            console.log(xhr);
          }
 });

Answer 6

You can try this one;

  $.ajax({
      url: "/search/",
      type: "GET",
      data:{txt:str},
      success: function(response) {
        document.getElementById("results").innerHTML = this.responseText;
      },
      error: function(xhr) {
        console.log(xhr);
      }
    });

Route:

Route::get('/search/', 'PrestashopController@getSearch');

Controller:

public function getSearch(Request $request){
  dd($request->txt);
  return "results"; //Just to see if it's returning correctly
}