如何在laravel中使用ajax正确实现简单的搜索功能？

Question

我正在尝试编写一个简单的搜索功能的学习目的，但我无法使其工作。

现在我只想用ajax在刀片视图中传递一些数据(传递给控制器函数)，然后通过相同的控制器函数在另一个视图中显示这些数据。

我目前拥有的是这样的：

路由：

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

HomeController中的search：

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

search-results视图

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

最后是ajax：

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

有没有人能帮我解决这个问题？我不确定我做错了什么.

Answer 1

您应该在JavaScript中将JsonResponse对象返回到易于使用的数据

操作：

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

AJAX调用是异步的，因此您可以进行调用并以单独的形式返回结果。如果您希望在单独的表单中显示结果，我建议您提交表单，然后返回带有数据return view('search-results')->with('data',$data);的视图，或者如果您坚持使用ajax调用，则返回一个响应，该响应将被发送到从return response()->json(["data" => $data]);提交数据的表单

Answer 3

路由：

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

HomeController中的search：

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

search-results视图

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

Ajax调用：

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);
        }
});

希望对你有帮助！