Question

您好我正在使用PHP框架Codeigniter 3.1 我成功添加了jquery的fly-to-cart效果，但问题是当我点击addtocart提交按钮时，它会改为其他页面（表单动作）我的表单操作是转到控制器方法名称'shopping / add' 所以在我点击提交后，我看到一个短时效果，它会立即重定向到购物/添加。

所以我搜索了怎么做并找到了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');
         }

Answer 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');

           }
       }

PHP飞到购物车效果jquery ajax /我想提交表单但仍然是同一页面

1 个答案: