yii2 购物车 ajax
yii2 shopping cart ajax
我想在 yii2 中修改现有的购物车,这样它就不会重新加载页面,意味着通过 ajax 让它工作。
当前购物车如下所示:
<form method="post" id="form-prodtobuy-<?= $p->id ?>" action="<?= \Yii::$app->urlManager->createUrl(["site/cart"]) ?>">
<input type="hidden" name="<?= Yii::$app->request->csrfParam; ?>" value="<?= Yii::$app->request->csrfToken; ?>" />
<input type="hidden" name="task" value="update" />
<input id="<?= $p->id ?>" class="form-control buy-input" name="product[<?= $p->id ?>]" value="<?= Purchase::getCartValue($p->id) ?>" data-id="<?= $p->id ?>" placeholder="0">
<button class="btn btn-primary" type="submit">Buy <i class="glyphicon glyphicon-shopping-cart"></i></button>
</form>
它工作正常,但会重新加载页面。
var_dump($_SESSION);之后看起来像:
array(2) { ["__flash"]=> array(0) { } ["products"]=> array(3) { [2958]=> string(1) "2" [2959]=> string(1) "1" [2581]=> string(1) "1" } }
我明显的解决方案是在提交事件上添加 e.preventDefault(),如下所示:
$(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
e.preventDefault();
var someVar = $('#someInput').val();
$.ajax({
type: "post",
url: "<?php echo \Yii::$app->urlManager->createUrl(["site/cart"]) ?>",
data: {???:someVar},
.....................
});
});
ajax 'data' 中应该包含什么?
在哪里或如何获取变量名称以正确设置会话?
在 ajax "data" 中放入表单序列化输出。
注意我使用的是 heredoc 格式,所以 last EOT_JS 前面不能有空格。
$urlForm = \Yii::$app->urlManager->createUrl(["site/cart"]);
$this->registerJs( <<< EOT_JS
$(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "post",
url: "{$url}",
data: formData,
function(data) {
console.log('form submit output');
console.log(data);
}
});
});
EOT_JS
);
我想在 yii2 中修改现有的购物车,这样它就不会重新加载页面,意味着通过 ajax 让它工作。 当前购物车如下所示:
<form method="post" id="form-prodtobuy-<?= $p->id ?>" action="<?= \Yii::$app->urlManager->createUrl(["site/cart"]) ?>">
<input type="hidden" name="<?= Yii::$app->request->csrfParam; ?>" value="<?= Yii::$app->request->csrfToken; ?>" />
<input type="hidden" name="task" value="update" />
<input id="<?= $p->id ?>" class="form-control buy-input" name="product[<?= $p->id ?>]" value="<?= Purchase::getCartValue($p->id) ?>" data-id="<?= $p->id ?>" placeholder="0">
<button class="btn btn-primary" type="submit">Buy <i class="glyphicon glyphicon-shopping-cart"></i></button>
</form>
它工作正常,但会重新加载页面。
var_dump($_SESSION);之后看起来像:
array(2) { ["__flash"]=> array(0) { } ["products"]=> array(3) { [2958]=> string(1) "2" [2959]=> string(1) "1" [2581]=> string(1) "1" } }
我明显的解决方案是在提交事件上添加 e.preventDefault(),如下所示:
$(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
e.preventDefault();
var someVar = $('#someInput').val();
$.ajax({
type: "post",
url: "<?php echo \Yii::$app->urlManager->createUrl(["site/cart"]) ?>",
data: {???:someVar},
.....................
});
});
ajax 'data' 中应该包含什么?
在哪里或如何获取变量名称以正确设置会话?
在 ajax "data" 中放入表单序列化输出。
注意我使用的是 heredoc 格式,所以 last EOT_JS 前面不能有空格。
$urlForm = \Yii::$app->urlManager->createUrl(["site/cart"]);
$this->registerJs( <<< EOT_JS
$(document).on('submit', '[id^=form-prodtobuy-]', function(e) {
e.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: "post",
url: "{$url}",
data: formData,
function(data) {
console.log('form submit output');
console.log(data);
}
});
});
EOT_JS
);