#javascript #php #jquery #ajax #codeigniter
#javascript #php #jquery #ajax #codeigniter
Вопрос:
Здравствуйте, я использую PHP framework Codeigniter 3.1, я успешно добавляю эффект отправки в корзину с помощью jquery, но проблема в том, что когда я нажимаю на кнопку отправки addtocart, она переключается на другую страницу (действие формы). Действие моей формы — перейти к имени метода контроллера «покупки / добавить», поэтому после нажатия кнопки отправки я вижу кратковременный эффект, и он немедленно перенаправляется на «покупки / добавить».
итак, я ищу, как это сделать, и нашел AJAX. Я пробую подобный код, но он не работает.
<html>
<head>
<title>Codeigniter cart class</title>
<link href='http://fonts.googleapis.com/css?family=Raleway:500,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/shopping.css">
<script src="<?php echo base_url();?>js/flytocart.js"></script>
<script>
$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
},'json');
return false;
//below is fly to cart effect/////////////////
$('.add-to-cart').on('click',function(){
$('html, body').animate({
'scrollTop' : $(".cart_anchor").position().top
});
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.cart_anchor'));
});
});
</script>
</head>
<body>
<div id='content_shop'>
<div id="products_e" align="center">
<h2 id="head" align="center">Products</h2>
<?php
// "$products" send from "shopping" controller,its stores all product which available in database.
foreach ($products as $product) {
?>
<div id='product_div'>
<div id='image_div'>
<img src="<?php echo base_url() . $product['picture'] ?>" height="150" width="150"/>
</div>
<div id='info_product'>
<div id='name'><?php echo $product['name']; ?></div>
<div id='desc'> <?php echo $product['description']; ?></div>
<div id='rs'><b>ราคา</b>:<big style="color:green">
$<?php echo $product['price']; ?></big></div>
<?php
// Create form and send values in 'shopping/add' function.
echo form_open('shopping/add');
echo form_hidden('id', $product['product_id']);
echo form_hidden('name', $product['name']);
echo form_hidden('price', $product['price']);
?> </div>
<div id='add_button' class="add-to-cart">
<?php
$btn = array(
'class' => 'fg-button teal add-to-cart',
'value' => 'Add to Cart',
'name' => 'action'
);
// Submit Button.
echo form_submit($btn);
echo form_close();
?>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
метод контроллера добавить
public function add()
{
// Set array for send data.
$insert_data = array(
'id' => $this->input->post('id'),
'name' => $this->input->post('name'),
'price' => $this->input->post('price'),
'qty' => 1
);
// This function add items into cart.
$this->cart->insert($insert_data);
// This will show insert data in cart.
$this->load->view('header');
$this->load->view('shopping/cart');
$this->load->view('footer');
}
Комментарии:
1. Пожалуйста, добавьте также метод контроллера
2. хорошо, я уже добавляю это.
Ответ №1:
Пожалуйста, попробуйте
<script>
$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$('html, body').animate({
'scrollTop' : $(".cart_anchor").position().top
});
var itemImg = $(this).parent().find('img').eq(0);
flyToElement($(itemImg), $('.cart_anchor'));
$.post($(this).attr('action'), $(this).serialize(), function(response){
//here we will receive the view of add methods.So use this response for your requirement.
//$('.cart').html(response);
});
return false;
});
</script>
В действии контроллера
public function add(){
if($this->input->post()){
// Set array for send data.
$insert_data = array(
'id' => $this->input->post('id'),
'name' => $this->input->post('name'),
'price' => $this->input->post('price'),
'qty' => 1
);
// This function add items into cart.
$this->cart->insert($insert_data);
// This will show insert data in cart.
$this->load->view('header');
$this->load->view('shopping/cart');
$this->load->view('footer');
}
}
Комментарии:
1. не понимаю, что вы имеете в виду в действии контроллера
2. Если вы возвращаете данные в формате json, вам нужно использовать «echij-json_encode ($array)», если необработанный html / текст, вам не требуется использовать параметр json в методе $.post
3. Неопределенная переменная: массив
4. и если я не использую echo json_encode ($ array); это все равно изменится на другую страницу
5. на самом деле я использую <style> .hide { position: absolute; top:-1px; left:-1px; width: 1px; height: 1px; } </style> <имя iframe=»hiddenFrame» class=»скрыть»></iframe> <действие формы =»receiver.pl «method=»post» target =»hiddenFrame»> <имя ввода =»signed» type=»checkbox»> <входное значение =»Save» type=»submit»> </form> и уже успешно. но я тоже хотел бы знать ajax. потому что знание ajax принесет больше пользы в будущем