javascript - Bootstrap 模式中的 Laravel ajax 搜索

Question

我想在 bootstrap 4 模态标题中使用搜索栏，并使用 ajax get 请求在模态主体中显示搜索结果。

请求成功，但我无法在模态中显示结果。

如何在模式中显示请求预览的结果？

Controller :

public function index()
{
    ....

    //MODAL IS A PARTIAL ON THE INDEX PAGE

    return view('friends.index',compact('friends','friendRequests'));
}

public function search(Request $request)
{
    if ($request->has('name')) {
        $name = $request->query('name');
        $results = User::where('name','like','%'.$name.'%')->get();
    } else {
        $results = User::all();
    }

    //RETURNING THE MODEL PARTIAL,BUT WITH RESULTS
    return view('layouts.partials.friends.modal',compact('results'));
}

相关路线:

Route::get('/friends','FriendsController@index')->name('friends');
Route::get('/friends/search','FriendsController@search')
->name('searchFriend');

索引 View :

<div class="container my-5">
<div class="row">
    <h4><i class="fas fa-user-friends"> Friends:</i></h4>
</div>

<div class="row">
    <button type="button" class="btn btn-outline-success mx-auto btn-lg" 
data-toggle="modal" data-target=".add-friends-modal">
        Add new <i class="fas fa-user-plus"></i>
    </button>
</div>

//MODAL PARTIAL IS INCLUDED HERE
@include('layouts.partials.friends.modal')

<hr>

@include('layouts.partials.friends.friends-list')

模态部分:

<div class="modal fade add-friends-modal" tabindex="-1" role="dialog" 
aria-labelledby="friends-modal" aria-hidden="true">
<div class="modal-dialog modal-lg">

<div class="modal-content">

    <div class="modal-header ">
        <div class="container">
            <div class="row">
                <div class="col-6 offset-3">
                    <h5 class="modal-title text-center">Add new friend:</h5>
                </div>
                <div class="row mx-auto">
                    <form class="form-inline mt-4 mb-4" action="javascript:search();">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" 
              id="search-input">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>

            </div>
        </div>

        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="modal-body">

      //RESULTS SHOULD BE DISPLAYED HERE

      @if(isset($results) && count($results)>0)
              <ul>
              @foreach($results as $result)
                <li>{{ $result->name }}</li>
                  @endforeach
              </ul>
      @endif
  </div>

</div>

搜索AJAX.js

function search() {

var userInput = document.getElementById("search-input").value;

var xhttp = new XMLHttpRequest();

xhttp.open('GET','/friends/search?name='+userInput,true);

xhttp.send();
}

Answer 1

我建议只返回数据而不是 View 。你可以做类似的事情。

public function index()
{
    ....

    //MODAL IS A PARTIAL ON THE INDEX PAGE

    return view('friends.index',compact('friends','friendRequests'));
}

public function search(Request $request)
{
    if ($request->has('name')) {
       return User::where('name','like','%'.$name.'%')->get();
    }

    return response([]);
}

模态部分

<div class="modal fade add-friends-modal" tabindex="-1" role="dialog" 
aria-labelledby="friends-modal" aria-hidden="true">
<div class="modal-dialog modal-lg">

<div class="modal-content">

    <div class="modal-header ">
        <div class="container">
            <div class="row">
                <div class="col-6 offset-3">
                    <h5 class="modal-title text-center">Add new friend:</h5>
                </div>
                <div class="row mx-auto">
                    <form class="form-inline mt-4 mb-4" action="javascript:search();">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" 
              id="search-input">
                        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </form>
                </div>

            </div>
        </div>

        <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="modal-body">
      <div id="results"></div>
  </div>

</div>

和JS文件

function search() {
  var resultsDiv = document.getElementById("results");
  var req = new XMLHttpRequest();
  req.responseType = "json";
  req.open("GET", url, true);
  req.onload = function() {
    var users = req.response;
    var content = "<ul>";
    for (var user in users) {
      content += "<li>" + user.name + "</li>";
    }
    content += "</ul>";
    resultsDiv.innerHTML = content;
  };
  req.send(null);
}