Javascript 引导模式下的Laravel ajax搜索

我想使用Bootstrap4模式头中的搜索栏，并使用ajax get请求在模式体中显示搜索结果

请求已成功，但无法在模式中显示结果

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

控制器：

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

索引视图：

<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')

---

我建议只返回数据而不是视图。你可以这样做

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

函数搜索（）{
var resultsDiv=document.getElementById（“结果”）；
var req=新的XMLHttpRequest（）；
req.responseType=“json”；
请求打开（“获取”，url，true）；
req.onload=函数（）{
var用户=请求响应；
var content=“
”；
for（用户中的var用户）{
content+=“
”+user.name+“
”；
}
内容+=“
”；
resultsDiv.innerHTML=内容；
};
请求发送（空）；
}

我没有看到任何处理ajax响应的代码。我认为搜索方法中的代码足以呈现结果，这是我第一次使用ajax。感谢您的回答，除了js文件中的user.name外，一切都正常，它显示“undefined”。关于如何修复这个问题，有什么想法吗？哦！我的错。您可以像这样访问用户[user].name

<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>

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