jQuery，ajax不会提示某些消息 [英] Jquery, ajax won't alert some message
本文介绍了jQuery，ajax不会提示某些消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我正在使用后端的CodeIgniter做购物车网站 这是要抓住的地方，我在表单标签内使用添加到购物车"按钮来循环产品列表. 假设我有5种产品要显示，将有5种表单标签:
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' id='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' id='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
还有我的javascript/jquery脚本:
<script type="text/javascript">
$(document).ready(function() {
$("#btn-add").click(function() {
var action = $("#cart").attr('action');
var form_data = {
vid : $("#vid").val(),
is_ajax : 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'exists')
{ alert("This item is in your cart already! You can only add 1 same item once");
}
if(response == 'newses')
{ alert("This item has been added succesfully!");
document.location.reload(true);
}
if(response == 'new_added')
{
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
</script>
作为我的控制器(以动作形式)localhost/site/cart/add:
public function add() {
$vid=$_POST['vid'];
if($this->session->userdata('shoppingCart')===FALSE)
{
$shoppingCart = array (
$vid => 1
);
$this->session->set_userdata('shoppingCart',$shoppingCart);
echo 'newses';
} else {
$tmp = $this->session->userdata('shoppingCart');
if(array_key_exists($vid, $tmp)) {
//only allow user to add qty:1 to the same product
echo 'exists';
} else {
$tmp[$vid]= 1;
$this->session->set_userdata('shoppingCart',$tmp);
echo 'new_added';
}
}
}
所以现在是问题了，我可以毫无问题地将产品添加到购物车中，购物车/添加控制器中的所有东西都运行良好，输出与预期的一样. 但是我需要提醒客户产品是否已添加或失败(如我的jquery代码所示). 问题是，该脚本只能在第一个创建的脚本上正常运行. 意味着，如果有5个产品，它将循环并正确创建5个表单标签，只有第一个表单标签才能成功运行脚本(单击按钮后).第2至第5表单将重定向到其他空白页，以显示结果(例如，新闻"，"new_added"，存在")，而不按照脚本中的说明提醒用户(但购物车功能正常运行). /p>
我做错了什么?
解决方案
尝试一下
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' class='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' class='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
jQuery
$(document).ready(function() {
$(".btn-add").click(function() {
var $this = $(this);
var $form = $this.parents('form');
var action = $form.attr('action');
var vid = $form.find('input.vid').val();
var form_data = {
vid : vid,
is_ajax : 1
};
$.ajax({
type : "POST",
url : action,
data : form_data,
success : function(response) {
if (response == 'exists') {
alert("This item is in your cart already! You can only add 1 same item once");
}
if (response == 'newses') {
alert("This item has been added succesfully!");
document.location.reload(true);
}
if (response == 'new_added') {
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
So I am doing a shopping cart site, using CodeIgniter on backend Here is the catch, I loop the product list, with 'add to cart' button, inside a form tag. So let's say, I have 5 products to display, there will be 5 form tag as:
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' id='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' id='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
And my javascript/jquery script:
<script type="text/javascript">
$(document).ready(function() {
$("#btn-add").click(function() {
var action = $("#cart").attr('action');
var form_data = {
vid : $("#vid").val(),
is_ajax : 1
};
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'exists')
{ alert("This item is in your cart already! You can only add 1 same item once");
}
if(response == 'newses')
{ alert("This item has been added succesfully!");
document.location.reload(true);
}
if(response == 'new_added')
{
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
</script>
As my controller (in form action) localhost/site/cart/add:
public function add() {
$vid=$_POST['vid'];
if($this->session->userdata('shoppingCart')===FALSE)
{
$shoppingCart = array (
$vid => 1
);
$this->session->set_userdata('shoppingCart',$shoppingCart);
echo 'newses';
} else {
$tmp = $this->session->userdata('shoppingCart');
if(array_key_exists($vid, $tmp)) {
//only allow user to add qty:1 to the same product
echo 'exists';
} else {
$tmp[$vid]= 1;
$this->session->set_userdata('shoppingCart',$tmp);
echo 'new_added';
}
}
}
So the problem now, I can add the product to my shopping cart with no problem, all the stuff inside cart/add controller runs fine, the output is as expected. But I need to alert the customer whether the product has been added or failed (as shown in my jquery code). Problem is, the script will run fine only for the 1st created. Means, if there is 5 products, it will loop and create 5 form-tag right, only the 1st form-tag will run the script successfully (after the button is clicked). The 2nd-5th form will redirect to other blank page, echoing the result (e.g "newses", "new_added", "exists"), not alerting the user as stated in the script (but the shopping cart function works properly).
What did I do wrong?
解决方案
Try this
<?php foreach ($products as $vid):?>
<form id='cart' method='post' action='<?php echo base_url();?>cart/add'>
<input type='hidden' class='vid' name='vid' value='<?php echo $vid['id'];?>'/>
<div class="video_box">
<div class="video">
<a href="#<?php echo $vid['id'];?>" name='modal'>
<img src="<?php echo base_url(); ?>assets/images/<?php echo $vid['video_thumbnail'];?>" alt="<?php echo $vid['title'];?>" border="0" height='150' width='100' />
</a>
</div>
<div class="video_checkbox">
<?php if($this->session->userdata('nric')===FALSE ) {
echo "Please Login to Rent/Purchase"; } else { ?>
<input type='image' class='btn-add' src="<?php echo base_url(); ?>assets/images/rent_btn.png" alt="Rent" border="0" />
<?php } ?>
</div>
</form>
<?php endforeach;?>
Jquery
$(document).ready(function() {
$(".btn-add").click(function() {
var $this = $(this);
var $form = $this.parents('form');
var action = $form.attr('action');
var vid = $form.find('input.vid').val();
var form_data = {
vid : vid,
is_ajax : 1
};
$.ajax({
type : "POST",
url : action,
data : form_data,
success : function(response) {
if (response == 'exists') {
alert("This item is in your cart already! You can only add 1 same item once");
}
if (response == 'newses') {
alert("This item has been added succesfully!");
document.location.reload(true);
}
if (response == 'new_added') {
alert("This item has been added succesfully1!");
document.location.reload(true);
}
}
});
return false;
});
});
这篇关于jQuery，ajax不会提示某些消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
