需要有关如何使用服务器端 Ajax 查询填充 DIV 然后使用 @foreach 进行迭代的指导。当前收到'undefined variable'错误

Question

在Laravel项目中，我试图使用Ajax填充div，然后使用@foreach填充商店库。如果可能的话，我想使用服务器端的内容生成策略。然而，一些愚蠢的事情正在发生，我无法理解——我得到了以下错误：

$user_query is undefined
Make the variable optional in the blade template. Replace {{ $user_query }} with {{ $user_query ?? '' }}

这(@foreach($user_query as$item((是如何在刀片中构建的？

路线

Route::get('/ajaxStoreRequest', 'StoreController@ajaxStoreRequest');
Route::post('/ajaxStoreRequest/post', 'StoreController@ajaxStoreRequestPost');

这是StoreController.php：

<?php
namespace AppHttpControllers;
use AppCoin;
use IlluminateHttpRequest;
use AppDataTablesStoresDataTable;
use AppDataTablesStoresDataTableEditor;
use IlluminateSupportFacadesDB;
class StoreController extends Controller
{
public function ajaxStoreRequest()
{
return view('store.index');
}
public function ajaxStoreRequestPost(Request $request)
{
$user_query= DB::table('coins')
->select('id','year', 'mint', 'series', 'rating', 'rating_group','photo_link1', 'for_sale_price')
->where('for_sale', '=', 1)
->where('sold', '=', 0)
->where('series', '=', $request->series)
->where('year', '=', $request->year)
->where('mint', '=', $request->mint)
->where('rating_group', '=', $request->rating_group)
->get();
return response()->json($user_query);
}
}

DD($user_query(；显示以下阵列格式

IlluminateSupportCollection {#552
#items: array:1 [
0 => {#555
+"id": 2
+"year": 1878
+"mint": "Philadelphia"
+"series": "Morgan Dollar"
+"rating": "Ungraded"
+"rating_group": "PCGS"
+"photo_link1": "editor/20200328_002220_888888966_732020162248388.jpg"
+"for_sale_price": "44"
}
]
}

这是store/indexblade.php底部的Ajax脚本

<script type="text/javascript">
$.ajaxSetup({
beforeSend: function(xhr, type) {
if (!type.crossDomain) {
xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
}
},
});
$(".btn-submit").click(function(e){
e.preventDefault();
var series = $("#series option:selected").val();
var year = $("input[name=year]").val();
var mint = $("#mint option:selected").val();
var rating_group = $("#rating_group option:selected").val();
var price_filter = $("input[name=price_filter]:checked").val();
$.ajax({
type:'POST',
url:'/ajaxStoreRequest/post',
data:{series:series, year:year, mint:mint, rating_group:rating_group, price_filter:price_filter},
success:function(result){
$('.collapse').collapse('show');
$('#user_query').html(result);
}
});
});
</script>

这是store/index.blade.php中的HTML

<div class="row row-deck js-gallery collapse">
<div class="user_query" id="user_query">
@foreach ($user_query as $item)                                  <!-- THIS IS THE ERROR -->
<div class="col-md-6 col-xl-4">
<div class="block">
<div class="options-container">
@if ($item->photo_link1)
<img class="img-fluid options-item" src="storage/{{$item->photo_link1}}" style="width:300px; height:300px" alt="">
@else
<img class="img-fluid options-item" src="images/no-user-profile-picture-1200x900.jpg" style="width:300px; height:300px" alt="">
@endif
<div class="options-overlay bg-black-75">
<div class="options-overlay-content">                       
<a class="btn btn-sm btn-primary img-lightbox" href="gallery/{{$item->id}}">
View
</a>
<a class="btn btn-sm btn-light" href="javascript:void(0)">
<i class="fa fa-plus text-success mr-1"></i> Add to cart
</a>
</div>
</div>
</div>
<div class="block-content">
<div class="mb-2">
<div class="h4 font-w600 text-success float-right ml-1">${{$item->for_sale_price}}</div>
<a class="h4" href="be_pages_ecom_store_product.html">{{$item->year}}-{{$item->mint}}</a>
</div>
<p class="font-size-sm text-muted">{{$item->series}} ({{$item->rating}} {{$item->rating_group}})</p>
</div>
</div>
</div>
@endforeach
</div>
</div>

Answer 1

我正试图使用Ajax填充div，然后使用@foreach

这从根本上是倒退的。store/index.blade.php是在服务器端呈现的，因此从ajax调用返回的任何数据都必须使用JavaScript添加到DOM中。