ajax Laravel 中搜索栏的未捕获 ReferenceError
ajax Uncaught ReferenceError for search bar in Laravel
我正在尝试为我的产品列表创建一个 real-time 搜索栏,但我总是进入我的控制台
Uncaught ReferenceError: data is not defined
at HTMLInputElement.<anonymous> (produits:243)
at HTMLDocument.dispatch (jquery-2.2.4.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.4.min.js:3)
我想在不刷新页面的情况下显示产品,这就是我使用 ajax 的原因,但由于我只用过一次,所以我不太理解这段代码的每一部分,我找到了
所以这是我的 blade :
<div class="view-product d-flex align-items-center mr-15">
<input type="text" placeholder='...' class="form-check" id="keyword" name="keyword" title="chercher produit">
<p><i class="fa fa-search mr-15" ></i></p>
<div id="result">
</div>
</div>
这是我的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('search') }}",
method:'GET',
data: {query: query},
dataType:'json',
success: function(data) {
if (data.success) {
$('#result').html(data.html);
} else {
console.log(data.message);
}
}
})
}
$(document).on('keyup', '#keyword', function(){
var query = $(this).val();
fetch_customer_data(query);
$('#result').html(data.html);
$e.preventDefault();
});
});
</script>
最后是我的控制器
if($request->ajax()) {
$query = $request->get('query');
if(empty($query)) {
return back()->withError('Aucun resultat trouvée');
}
else {
$products = DB::table('products')
->where('nomProduit','LIKE','%'.$request->keyword."%")
->where('description','LIKE','%'.$request->keyword."%")
->where('typeActivite','LIKE','%'.$request->keyword."%")
->get();
}
$total = $products->count();
$html = view('front.search_result', [
'products' => $products,
])->render();
return response()->json([
'success' => true,
'html' => $html,
'total' => $total,
], 200);
} else {
return response()->json([
'success' => false,
'message' => "Something went wrong!",
], 403);
}
我的代码有什么问题?
在您的 keyup
事件处理程序中,您有 $('#result').html(data.html);
已在 ajax 请求中完成,因此删除该行。
您还使用了未在任何地方定义的 $e
(作为事件对象)
$(document).on('keyup', '#keyword', function($e){ // define event parameter
var query = $(this).val();
fetch_customer_data(query);
//$('#result').html(data.html); remove this line
$e.preventDefault();
});
我正在尝试为我的产品列表创建一个 real-time 搜索栏,但我总是进入我的控制台
Uncaught ReferenceError: data is not defined
at HTMLInputElement.<anonymous> (produits:243)
at HTMLDocument.dispatch (jquery-2.2.4.min.js:3)
at HTMLDocument.r.handle (jquery-2.2.4.min.js:3)
我想在不刷新页面的情况下显示产品,这就是我使用 ajax 的原因,但由于我只用过一次,所以我不太理解这段代码的每一部分,我找到了 所以这是我的 blade :
<div class="view-product d-flex align-items-center mr-15">
<input type="text" placeholder='...' class="form-check" id="keyword" name="keyword" title="chercher produit">
<p><i class="fa fa-search mr-15" ></i></p>
<div id="result">
</div>
</div>
这是我的脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('search') }}",
method:'GET',
data: {query: query},
dataType:'json',
success: function(data) {
if (data.success) {
$('#result').html(data.html);
} else {
console.log(data.message);
}
}
})
}
$(document).on('keyup', '#keyword', function(){
var query = $(this).val();
fetch_customer_data(query);
$('#result').html(data.html);
$e.preventDefault();
});
});
</script>
最后是我的控制器
if($request->ajax()) {
$query = $request->get('query');
if(empty($query)) {
return back()->withError('Aucun resultat trouvée');
}
else {
$products = DB::table('products')
->where('nomProduit','LIKE','%'.$request->keyword."%")
->where('description','LIKE','%'.$request->keyword."%")
->where('typeActivite','LIKE','%'.$request->keyword."%")
->get();
}
$total = $products->count();
$html = view('front.search_result', [
'products' => $products,
])->render();
return response()->json([
'success' => true,
'html' => $html,
'total' => $total,
], 200);
} else {
return response()->json([
'success' => false,
'message' => "Something went wrong!",
], 403);
}
我的代码有什么问题?
在您的 keyup
事件处理程序中,您有 $('#result').html(data.html);
已在 ajax 请求中完成,因此删除该行。
您还使用了未在任何地方定义的 $e
(作为事件对象)
$(document).on('keyup', '#keyword', function($e){ // define event parameter
var query = $(this).val();
fetch_customer_data(query);
//$('#result').html(data.html); remove this line
$e.preventDefault();
});