引导模式中的 Laravel ajax 搜索

Posted 2023-03-14

【中文标题】引导模式中的 Laravel ajax 搜索

【英文标题】：Laravel ajax search in bootstrap modal

【发布时间】：2018-12-19 14:10:18

【问题描述】：

我想在 bootstrap 4 modal header 中使用搜索栏，并使用 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')

模态部分：

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

【问题讨论】：

我没有看到任何处理 ajax 响应的代码。

我认为search方法中的代码足以渲染结果，这是我第一次使用ajax。

【参考方案1】：

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

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

【讨论】：

感谢您的回答，除了 js 文件中的 user.name，一切正常，它显示“未定义”。关于如何解决这个问题的任何想法？

哦！我的错。你可以像这样访问 users[user].name