实现Laravel/AJAX搜索栏
实现Laravel/AJAX搜索栏
提问于 2017-01-21 03:42:46
您好，我可以做一个标准的AJAX/PHP搜索，但发现它很难转换为Laravel。我正在使用key up而不是button click。我不确定这是否是实现ajax/laravel搜索栏的正确方式。我希望将数据库数据输出到视图页面的div中，但需要有关这方面的帮助。如果有人认为我做错了，请给我建议。总是愿意学习新的代码。
控制器：
<?php
namespace App\Http\Controllers;
use App\Patient;
use DB;
use Illuminate\Http\Request;
class PatientController extends Controller
{
public function search(Request $request) {
// get the search term
$text = $request->input('text');
// search the members table
$patients = DB::table('patients')->where('firstname', 'Like', $text)->get();
// return the results
return response()->json($patients);
}
} 路由：
Route::get('search', 'PatientController@search');查看：
@extends('Layout.master')
@section('content')
<!-- Ajax code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function(){
$('#txtSearch').on('keyup', function(){
var text = $('#txtSearch').val();
$.ajax({
type:"GET",
url: '127.0.0.1:8000/search',
data: {text: $('#txtSearch').val()},
success: function(data) {
console.log(data);
}
});
});
});
</script>
<div style="margin-top:70px;"></div>
@include('partials._side')
<div class="container">
<form method="get" action="">
<div class="input-group stylish-input-group">
<input type="text" id="txtSearch" name="txtSearch" class="form-control" placeholder="Search..." >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<div id="result"></div>
</div>
@endsection回答 3
Stack Overflow用户
回答已采纳
发布于 2017-01-21 03:47:32
在您的AJAX请求更改中：
'127.0.0.1:8000/search'至
'/search'我建议你使用
非常容易设置。
Check out the API documentation.
Stack Overflow用户
发布于 2017-01-21 03:48:24
取决于您的Laravel版本(新版本使用此命令)：
use Illuminate\Http\Request;
public function search(Request $request) {
$text = $request->input('text');
$patients = DB::table('patients')->where('firstname', 'Like', "$text")->get();
return response()->json($patients);
}然后在javascript中：
$(document).ready(function(){
$('#txtSearch').on('keyup', function(){
var text = $('#txtSearch').val();
$.ajax({
type:"GET",
url: 'search',
data: {text: $('#txtSearch').val()},
success: function(response) {
response = JSON.parse(response);
for (var patient of response) {
console.log(patient);
}
}
});
});
});Stack Overflow用户
发布于 2017-01-21 03:51:42
如果你的意思是在浏览器中处理结果，请检查你的AJAX代码中的jQuery，"response“变量是服务器返回的数据。在AJAX完成后，您只需要将返回的数据填充到页面中。
例如，放入
<div id="searchResult"></div>通过jquery返回响应后，您需要在ajax中添加以下内容：
$("#searchResult").html(response);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41771209
复制相关文章
相似问题
腾讯云开发者
