Home » Php » javascript – How to clean an url after search by using GET with laravel?

javascript – How to clean an url after search by using GET with laravel?

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m using the method GET to search some records in my database

<form id="cliente" class="form-horizontal" action="{{route('resultados_clientes')}}" method="get">
        <div class="form-group row">
          <label class="col-md-6 col-form-label" for="cliente"></label>
          <div class="col-md-12">
            <input form="cliente" maxlength="100" autocomplete="off" class="form-control" id="cliente" type="text" name="cliente" placeholder="Introduzca el rif o nombre del cliente a buscar" required>
            <br>
            <div class="pull-right">
            <button form="cliente" class="btn btn-sm btn-info" type="submit">
              Buscar</button>
          </div>
        </div>
      </form>

The problem is that when I found something and I return to my page for search it returns with the parameters of the search in the url… I would like to clean that.. How could I do?

this is the function of my controller

public function resultados_clientes(Request $request){
  $busqueda = $request->cliente;
  $clientes = strtoupper($busqueda);
  $perimetro = DB::table('tbl_perimetros as a')
    ->select('a.id','a.rif','a.cod_cliente','a.razon_social','a.holdings_id')
    ->leftjoin('tbl_holdings as b','b.id','=','a.holdings_id')
    ->select(array('a.id','b.hrif','b.hrazon_social','a.rif','a.razon_social','a.estatus'))
    ->where('a.rif','like', '%' . $clientes . '%')
    ->orWhere('a.razon_social', 'like', '%' . $clientes . '%')
    ->orWhere('b.hrif', 'like', '%' . $clientes . '%')
    ->orWhere('b.hrazon_social', 'like', '%' . $clientes . '%')  
    ->get();

  if($perimetro->count()) {
    return view('Busqueda_est.resultados_clientes',compact('perimetro','busqueda'));
  }

  $error_code = 1;
   return view('Busqueda_est.index', compact('error_code'));

}

I would like to do a kind of function or something like that in the .blade maybe with javascript or php

Here is my .web

/*BUSQUEDA ESTANDAR*/
Route::namespace('Busquedaest')->group(function () {
Route::get('busqueda_est', '[email protected]')->name('busqueda_est');
Route::get('busqueda_est-resultados-clientes', '[email protected]_clientes')->name('resultados_clientes');
});
How to&Answers:

You need to use POST instead of GET. to do that , change your html form to:

<form id="cliente" class="form-horizontal" action="{{route('resultados_clientes')}}" method="post">
    @csrf
    <div class="form-group row">
      <label class="col-md-6 col-form-label" for="cliente"></label>
      <div class="col-md-12">
        <input form="cliente" maxlength="100" autocomplete="off" class="form-control" id="cliente" type="text" name="cliente" placeholder="Introduzca el rif o nombre del cliente a buscar" required>
        <br>
        <div class="pull-right">
        <button form="cliente" class="btn btn-sm btn-info" type="submit">
          Buscar</button>
      </div>
    </div>
  </form>

in your web.php replace:

Route::get('busqueda_est-resultados-clientes', '[email protected]_clientes')->name('resultados_clientes');

With:

Route::post('busqueda_est-resultados-clientes', '[email protected]_clientes')->name('resultados_clientes');

Answer:

What you could do is to make ajax call to the server to fetch all records.
Using POST method would work, but it would result in the dialog popping up each time you’d like to reload the page in some browsers.

Depending on whether you are using any JavaScript framework there are different ways to achieve this.

My preferred framework is VueJs and I’m actually going to be streaming a screencast this Friday on how to build search component – you’re welcome to join: https://youtu.be/FJ1MaNtjPDs

With VueJs (or even straight JavaScript) you can use axios call, which would look something like that:

axios.get('/your-end-point-here')
  .then(function (response) {
      // use response.data with the returned data for the list
  })
  .catch(function (error) {
      console.log(error);
  })

Answer:

If you are using a method GET you will have the parameters on the url.
In order to not have them visible, you should be using the POST method instead.