我的问题解决者。希望你有一个富有成效的一天。我正在做一个电子商务网站项目，我用Laravel 8来做。到目前为止，我已经达到了创建"添加到购物车"的地步，以便客户可以进行购物。通过阅读不同的教程，我很感激我可以将产品添加到购物车中，编辑和更新它们也可以删除它们。但我想让它在不刷新页面的情况下工作。按照许多教程的建议，我使用Jquery创建Ajax请求。我想如果我把我的代码展示出来，你就会很容易理解和帮助我。
这是我的"添加到购物车"链接
<li class="add_to_cart"><a href="javascript:void(0)" data-tippy="Add to cart" onclick="addtocart(<?php echo $product->productID ?>)" data-tippy-placement="top" data-tippy-arrow="true" data-tippy-inertia="true"> <span class="lnr lnr-cart"></span></a></li>
这是Ajax和Jquery
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
function quickview(id) {
$.get('/quickview/'+id, function (response) {
if (response) {
$("#id").html(response.id);
$("#brand").html(response.brand);
$("#productname").html(response.product_name);
$("#price").html(response.price);
$("#description").html(response.product_context);
$("#img").attr('src',response.image);
}
})
}
function addtocart(id) {
var _url = '/product/add-to-cart/'+id;
$.ajax({
url: _url,
method: "GET",
data: {
_token: '{{ csrf_token() }}',
id: id
},
success: function (response) {
window.location.reload();
// I think here is where I stuck,
},
error: function (data) {
console.log('Error:', data);
}
});
}
</script>
这是我的路线
Route::get('/product/add-to-cart/{id}', [ProductController::class, 'addToCart'])->name('add.to.cart')->middleware('loggedin');
这里是控制器
public function addToCart($id)
{
$product = Product::findOrFail($id);
$cart = session()->get('cart', []);
if(isset($cart[$id])) {
$cart[$id]['quantity']++;
} else {
$cart[$id] = [
"name" => $product->product_name,
"quantity" => 1,
"price" => $product->price,
"maelezo" => $product->product_context,
"image" => $product->image
];
}
session()->put('cart', $cart);
return response()->json(['success' => true]);
// return response()->json($cart);
//return response()->json($cart);
}
最简单的解决方案是将href属性从anchor标签中移除。
<li class="add_to_cart">
<a data-tippy="Add to cart" onclick="addtocart(<?php echo $product->productID ?>)" data-tippy-placement="top" data-tippy-arrow="true" data-tippy-inertia="true">
<span class="lnr lnr-cart"></span>
</a>
</li>
另一个解决方案是用按钮改变锚标记，或者一个简单的span {custom design button}。
<button onclick="addtocart(<?php echo $product->productID ?>)">add to cart </button>
在表单或input type='submit'中添加按钮将提交表单，因此请注意。
工作原理
function showmsg1(){
document.getElementById("msg").innerText = 'hello, you clicked button without refresh';
}
function showmsg2(){
document.getElementById("msg").innerText = 'hello, you clicked button now it will refresh, this is hell...!';
}<h1> hello, wassup</h1>
<h3> click on buttons </h3>
<span> Without refresh: </span> <a onclick="showmsg1()"> <button>click me</button></a><br/>
<span> With refresh: </span><a onclick="showmsg2()" href=""> <button> click me </button> </a><br/>
<span id="msg"></span>根据你对我之前的回答的评论来回答。
这里的工作示例
样本HTML
Click on buttons<br/>
<span>Item btn1 <button onclick="addtocart(this)" class="btn btn-primary" id="btn1" value="btn1">Add to/Remove from cart</button></span><br/><br/>
<span>Item btn2 <button onclick="addtocart(this)" class="btn btn-primary" id="btn2" value="btn2">Add to/Remove from cart</button></span><br/><br/>
<span>Item btn3 <button onclick="addtocart(this)" class="btn btn-primary" id="btn3" value="btn3">Add to/Remove from cart</button></span><br/><br/>
<span>Item btn4 <button onclick="addtocart(this)" class="btn btn-primary" id="btn4" value="btn4">Add to/Remove from cart</button></span><br/><br/>
<span>Item btn5 <button onclick="addtocart(this)" class="btn btn-primary" id="btn5" value="btn5">Add to/Remove from cart</button></span><br/><br/>
<div id="sessions"></div>
脚本
//Laoding the dynamic page on document ready
$(document).ready(function(){
$("#sessions").load("showSession.php");
});
//function to add to cart
function addtocart(e){
val = e.value;
$.post("sessions.php",{type: "addtocart", value : val},function(data, status){
if(status == "success"){
$("#sessions").load("showSession.php");//Laoding the dynamic page once added/removed
}
});
}
对于任何查询注释下来。