我想在 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">×</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();
}
最佳答案
我建议只返回数据而不是 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">×</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);
}
关于javascript - Bootstrap 模式中的 Laravel ajax 搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51287100/