php - jquery ajax响应数据未显示在页面源代码中

Question

我正在使用购物车，如果用户单击加号图标，则该商品将添加到购物车中，如果用户想在购物车中再次添加相同的商品，则用户将单击该商品加号图标，并且该商品将在购物车中更新同一行。

以下是项目html：

<div class="Menudetail">
    <h1>Title <span>Add </span> <label>Price</label></h1>
            <div class="Menudetailtitle">soup menu</div>

    <div class="Menudproducts">
                <div class="itemscontainer">
        <div id="itemname_10" class="itemname">soup item 1</div>
        <div id="itemprice_10" class="itemprice">1200</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="10" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>
                    <div class="itemscontainer">
        <div id="itemname_13" class="itemname">soup item 2</div>
        <div id="itemprice_13" class="itemprice">1400</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="13" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>
                    <div class="itemscontainer">
        <div id="itemname_14" class="itemname">soup item 3</div>
        <div id="itemprice_14" class="itemprice">800</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="14" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>

    </div>
            <div class="Menudetailtitle">salad menu</div>

    <div class="Menudproducts">
                <div class="itemscontainer">
        <div id="itemname_11" class="itemname">salad item 1</div>
        <div id="itemprice_11" class="itemprice">1400</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="11" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>

    </div>
            <div class="Menudetailtitle">appetizer menu</div>

    <div class="Menudproducts">
                <div class="itemscontainer">
        <div id="itemname_12" class="itemname">appetizer item 1</div>
        <div id="itemprice_12" class="itemprice">1500</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="12" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>
                    <div class="itemscontainer">
        <div id="itemname_15" class="itemname">appetizer item 2</div>
        <div id="itemprice_15" class="itemprice">3600</div>
        <div class="itemaddsign">
        <!--<input type="hidden" name="sessid" id="sessid" value=""  />-->
        <a class="getitemval" id="15" href="#"><img width="13" border="0" height="12" alt="" src="http://localhost/food4u/front/images/plus.png"></a></div>
        </div>

    </div>

</div>

我正在使用 ajax 并将商品名称、数量、价格和商品 ID 发送到我的 codeigniter 控制器，并且我还使用 codeigniter 购物车库来处理购物车以下是当用户在购物车中添加三个商品时我的 ajax 响应

<p class="ctitle">soup item 1</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 1200/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="10">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 2</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 1400/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="13">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 3</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 800/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="14">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>

并假设用户再次单击项目 1 加图标，那么项目数量将为 2，其价格乘以 2，我得到以下 ajax 响应：

<p class="ctitle">soup item 1</p>
<p class="cartqty">2</p>
<p class="cartprice">Rs. 2400/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="10">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 2</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 1400/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="13">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 3</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 800/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="14">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>

我在 ajax 响应中发回完整的购物车，假设用户点击前三个项目，那么 ajax 响应将是

<p class="ctitle">soup item 1</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 1200/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="10">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 2</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 1400/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="13">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>
<p class="ctitle">soup item 3</p>
<p class="cartqty">1</p>
<p class="cartprice">Rs. 800/-</p>
<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;">
    <a href="#" id="14">
        <img src="http://localhost/food4u/front/images/order_cartdelete.jpg"
            width="12" height="12" border="0" />
    </a>
</p>

现在我有两个问题：

ajax 响应在 firefox firebug 中显示，但实际上它没有添加到页面源代码中
ajax 响应中有 order_cartdelete.jpg 图标，它将删除或减去购物车中的物品，当购物车中有一件物品时删除，如果购物车中有两个相同的物品，然后单击一下，它将从购物车中减去一件物品并保留购物车中的剩余物品

以下是我的ajax代码：

    $(document).ready(function() { 
    var link = "/food4u/";
    jQuery('.itemaddsign a').click(function() {
        var itemid = $(this).attr("id");
        var itemqty = 1;
        var itemdel = '';

        var itemname = jQuery('#itemname_'+itemid).text();
        var itemprice =  jQuery('#itemprice_'+itemid).text();
        $.post(link + "site/add_cart_item", { itemid: itemid, itemname: itemname, itemqty: itemqty,  itemprice: itemprice, ajax: '1', itemdel: itemdel },

        function(data){
            $('.ctitle11').remove();
            $('.carttitle11').empty(data);
            $('.carttitle11').append(data);         
        }); 

        return false;
    }); 
    });

如果您想查看我的控制器，请查看：

function add_cart_item()
{
    $itemid = $this->input->post('itemid');       // Assign posted item id to $itemid
    $itemname = $this->input->post('itemname');   // Assign posted item name to $itemname
    $itemqty = $this->input->post('itemqty');     // Assign posted item quantity to $itemqty
    $itemprice = $this->input->post('itemprice'); // Assign posted item price to $itemprice     

    $cart = $this->cart->contents(); 
    $exists = false;    
    $rowid = '';

    foreach($cart as $item)
    {       
        if($item['id'] == $itemid)     
        {
            $exists = true;
            $rowid = $item['rowid'];
            $qty = $item['qty'] + $itemqty;
            $price = $item['price'] * $qty;
            $name = $item['name'];                              
        }
    }       
    if($exists)
    {
        { 
        $cartlists = $this->cart_model->update_item($rowid, $name, $qty, $price);
        }
    }
    elseif($this->cart_model->validate_add_cart_item() == TRUE)
        {           
            $cartlists = $this->cart_model->validate_add_cart_item();
        }

        $cart2 = $this->cart->contents();
        foreach($cart2 as $cartsecond)
        {
            $rowid11 = $cartsecond['rowid'];
            $itemid11 = $cartsecond['id'];
            $itemqty11 = $cartsecond['qty'];
            $itemprice11 = $cartsecond['price'];
            $itemname11 = $cartsecond['name'];
            $itemsubtotal11 = $cartsecond['subtotal'];


        $cil = '';
        $cil .= '<p class="ctitle">'.$itemname11 . '</p>';
        $cil .= '<p class="cartqty">'.$itemqty11 . '</p>';
        $cil .= '<p class="cartprice">Rs. '.$itemsubtotal11 . '/-</p>';
        $cil .= '<p class="cdelete" style="margin:10px 0px 0px 7px; width:15px;"><a href="#" id="'.$itemid11.'"><img src="'. base_url() . 'front/images/order_cartdelete.jpg" width="12" height="12" border="0" /></a></p>'; 
        echo $cil;   
    }
}

ajax 响应是data如何从中提取信息并对其执行反向操作，以及当用户刷新页面或浏览任何其他页面时如何将购物车项目保留在购物车中

php - jquery ajax响应数据未显示在页面源代码中

0 回答 0

Related

Reference