用jquery更新元素

时间:2016-09-26 16:07:57

标签: javascript jquery json ajax ajaxform

嗨我在一个范围内有#item_quantity的id。单击一个按钮并使用#update_cart的id。我希望跨度刷新其内容。目标数据已经在点击上更新了,但也似乎无法更新其数据。

我正在使用以下脚本尝试刷新它: 我定位的链接与我所在的页面相同。一旦产品被添加到购物车,并刷新页面,然后列表更新,所以我认为我可以正确的脚本,只要点击一些东西,只需刷新该div,一切都将完成。但它什么也没做。

脚本

$(function() {
  $("#update_cart").click(function(evt) {
     $("#item_quantity").load("http://apecenergy.co.uk/products.php?p=4")
     evt.preventDefault();
  })
});

HTML

<div class="menu_cart_units "><span class="" id="item_quantity">
<cms:number_format quantity decimal_precision='0'/></span>&times;</div>
<div class="menu_cart_option"><cms:show title /></div>
<div class="menu_cart_subtotal"><span class="" id="item_price"> £<cms:number_format line_total /></span></div>

JSON

                "id":                <cms:show id/>,
                "quantity":          <cms:show quantity/>,
                "price":             <cms:show price/>,
                "line_total":        <cms:show line_total/>,
                "requires_shipping": <cms:if requires_shipping>true<cms:else/>false</cms:if>,
                "name":              "<cms:show name/>",
                "title":             "<cms:addslashes><cms:show title/></cms:addslashes>",
                "link":              "<cms:show link/>",
                "remove_item_link":  "<cms:pp_remove_item_link/>",
                "line_id":           "<cms:show line_id/>",

如果我按照ajax json方法进行操作,将会有多个ID与不同的产品相关,从每个id我需要的数量,名称和行总数,将在div中更新。

2 个答案:

答案 0 :(得分:1)

  

您的请求返回什么数据?

     

$("#item_quantity").load("http://apecenergy.co.uk/products.php?p=4")

假设用户返回有效的JSON,我会说一个简单的“成功”项目计数为[{'result':'success'},{'count','<count>'}]如果项目在购物车中成功更新,则返回类似[{'result':'error'}]!的内容,这应该是简单的

使用jquery进行ajax调用:

$.ajax({
type:"POST",
url:'Your url that return JSON encoded success with Count of items or Error message',
data:'item id to update here 4 i guess or post Data'
datatype:"JSON",
success:function(data)
{
var tmp=Jquery.parseJSON(data);
 switch(data.result)
  {
     case 'success':
           $('#item_quantity').text(data.count); //update the span  
           break;
     case 'error':
          alert('something went Wrong');
          break;
     default:
          alert('error');
          break;
  }
},
error:function()
{
   alert('Ajax Request Failed');
}
});

答案 1 :(得分:0)

// parse the JSON into a javascript object
var cart_items = JSON.parse(json);
// matches all items in the cart_items list, which have the id == 30
// filter returns an array of matched items
var matching_items = cart_items.filter(
    function (item) {
        if (item.id == 30) {
            return item;
        }
    });
// since it should only match one item, we take the first element of the array
var item = matching_items[0];
// print out the items quantity
console.log(item.quantity);