Calling a PHP method inside a controller with Ajax (Laravel)

Question

I have a Controller in my Laravel project called Clientecontroller, it works perfectly. Inside it, I have a method called listar() who brings me client's information.

public function listar(Cliente $cliente) {
    $clientes = DB::table('clientes')
        ->where('documento_id', 1)
        ->first();  

    return $clientes;
}

Sure it has some troubles but my main question is, how I call this listar() function from a view with Angular or Ajax or whatever could work.

I am working in a selling system and I have to bring the client information before selecting anything else. I want to write the ID number from the clients in my view and bring the client information from my controller without reloading. But I am still stuck in the processing reaching the listar() function.

Thank you very much.

Lior CHAMLA · Answer 1 · 2021-05-25T18:35:56.297

1. The classical HTML approach

Let's say you have a button on your page :

<button id="call-listar">Call !</button>

You could send an HTTP Request to your Laravel application like that :

document.querySelector('#call-listar').addEventListener('click', (e) => {
  // Use the fetch() API to send an HTTP Request :
  fetch('/the-url-of-listar-controller')
    .then(response => response.json())
    .then(json => {
      // Do what you want to do with the JSON
    });
});

You can find a very usefull documentation about the fetch() API here : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

2. Inside an Angular Component

This is an other story here, let's say you have this button in your HTML Template :

<button (click)="callListar()">Call !</button>

Inside your TypeScript, you could use HttpClientModule to send an HTTP Request to your Laravel App :

class MyComponent {
  
  constructor(private http: HttpClient){}

  callListar() {
   this.http.get('/url-of-listar-controller')
     .subscribe(response => {
       // Do what you want with the response
     });
  }
}

WARNING : HttpClientModule needed !

You must import the HttpClientModule inside your AppModule or any other module of your Angular App where you want to use this component :

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [...],
  imports: [HttpClientModule]
})

score 0 · Answer 2 · answered May 25 '21 at 18:34

0

in your routes.php file add

Route::post('/cliente', 'Clientecontroller@listar');

And now use your ajax call in order to send data to /cliente the data will be sent through to your listar method in the ClienteController.

$.ajax({
    type: "POST",
    url: '/cliente', 
    data: { id: 7 }
}).done(function( msg ) {
    alert( msg );
});

This question was answered, for more details head over here

answered May 25 '21 at 18:34

Sodik Abdullaev

158
4
12

I follow you but /cliente isn't a view, right? 'cuz I do what you say but now I have a POST http://127.0.0.1/cliente 404 (Not Found) error, that isn't a view of course. I am trying to load the data from listar in the current view I am. – Víctor Rodríguez May 25 '21 at 19:05

Calling a PHP method inside a controller with Ajax (Laravel)

2 Answers2