Wie implementiert man eine einfache Suchfunktionalität mit Ajax in Laravel korrekt?

Question

Ich versuche, eine einfache Suchfunktion für Lernzwecke zu programmieren, aber ich kann es nicht schaffen.

Was ich jetzt möchte ist einfach, einige Daten (zu einer Controller-Funktion) in einer Blade-Ansicht mit Ajax zu übergeben und dann diese Daten in einer anderen Ansicht über die gleiche Controller-Funktion anzuzeigen.

Was ich derzeit haben, ist dies:

Routen:

Route::get('/search-results', 'HomeController@search')->name('search'); 

search in HomeController:

public function search(Request $request){ 
     $data = $request->data; 
     return view('search-results')->with('data',$data); 
    } 

die search-results Ansicht

@extends('layouts.app') 
    @section('content') 
     <h1>{{$data}}</h1> 
    @endsection 

Und schließlich die Ajax:

var data = "success"; 
     $.ajax({ 
      url: 'search-results', 
      type: "get", 
      data: {data : data}, 
      success: function(response){ 
       if(data == "success") 
        console.log(response); 
      } 
     }); 

Kann mir jemand helfen, diese Arbeit zu machen? Ich bin nicht sicher, was ich falsch mache ...

Answer 1

eingereicht Sie JsonResponse Objekt die einfache Nutzung von Daten in JavaScript

Aktion zurückkehren sollte:

public function search(Request $request){ 
    $data = $request->data; 

    return new JsonResponse(compact('data')); 
} 

JavaScript:

$.ajax({ 
    url: "/search", 
    type: "get", 
    data: {data : data}, 
    success: function(response){ 
     console.log(response); 
    } 
}); 

Answer 2

Ein AJAX-Aufruf ist asynchron, daher können Sie einen Anruf tätigen und die Ergebnisse in einer separaten Form zurückgeben. Wenn Sie Ihre Ergebnisse in einer separaten Form zeigen möchten, empfehle ich, dass Sie das Formular absenden und dann die Ansicht mit Ihren Daten return view('search-results')->with('data',$data); zurückgeben oder wenn Sie bei einem axaj Anruf bleiben, senden Sie eine Antwort, die an das Formular gesendet wird, wo die Daten wurden von return response()->json(["data" => $data]);

Answer 3

Routen:

Route::get('/search-results', 'HomeController@search')->name('search'); 

search in HomeController:

public function search(Request $request){ 
    $result = []; 
    $result['data'] = $request->data; 
    return response()->json($result); 
} 

die search-results Ansicht

@extends('layouts.app') 
@section('content') 
    <h1 class="header"></h1> 
@endsection 

Ajax-Aufruf:

var data = "success"; 
$.ajax({ 
    url: "{{ route('search') }}", 
    type: "get", 
    data: {'data' : data}, 
    success: function(response){ 
     if(response.data == "success") 
      console.log(response.data); 
      $('.header').text(response.data); 
     } 
}); 

Hoffe es hilft dir !!!