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>

现在我有两个问题：

1. ajax响应在firefox firebug中显示，但实际上它没有在页面源代码中添加
2. 在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如何从中提取信息并对其执行反向操作，以及如何在用户刷新页面或浏览任何其他页面时将购物车项目保留在购物车中