从JSON数据获取产品ID并通过AJAX发布

Question

我正在使用for循环，使用javascript将返回的JSON数据输出到网页上，然后我试图获取商品的ID，以通过AJAX调用将其发送到API，但是我已经将ID硬编码在AJAX中，有人告诉我如何在AJAX函数中动态发送ID。 另外，我是否需要AJAX中缺少的回调函数（updateCartData），请先感谢您！

JAVASCRIPT

    function getCartData(data){  
    for (var i = 0; i < data.items.length; i++) {
        var id = data.items[i].id;
        var title = data.items[i].title
        var price = data.items[i].price
        var quantity = data.items[i].quantity
        var image = data.items[i].image

     $("#result").append("<div class='column left'><img src="+ image + "width=100 height=100 style=padding:20px></div><div class='column middle' >" + " " + title + " " + price + "</div><div class='column right' ><input type=number min=1 max=10 step=1 value="+quantity+" maxlength=2 size=2 /></div>");
    }}

var script = document.createElement('script');
script.src = 'https://example.com/cart.json?callback=getCartData'
document.getElementsByTagName('head')[0].appendChild(script);

JSON

     attributes: {}
        cart_level_discount_applications: []
        currency: "EUR"
        item_count: 2
        items: Array(1)
        0: {id: 26100757856320, properties: {…}, quantity: 2, variant_id: 26100757856320, key: "26100757856320:6a238690d3db493c4359175c62751c6e", …}
        length: 1
        __proto__: Array(0)
        items_subtotal_price: 133800
        note: null
        original_total_price: 133800
        requires_shipping: true
        token: "1234567890"
        total_discount: 0
        total_price: 133800
        total_weight: 8000
        __proto__: Object

AJAX

    $( window ).load(function() {
    $(":input").bind('keyup mouseup', function () {
        $.ajax({
          url: "https://example.com/cart/change.json?callback=updateCartData",
          jsonp: "updateCartData",
          dataType: "jsonp",
           data: {
            id: "26100757856320",
            quantity : 2
          },
          success: function(data) {
            console.log("quantity has been updated"); 
          }
        }); 
        });
        });

Answer 1

生成输入时，将项目ID添加到输入中。 在您的Ajax调用中，只需将$(this).attr('id')用作ID，将$(this).val()用作数量。

function getCartData(data) {
    for (var i = 0; i < data.items.length; i++) {
        var id = data.items[i].id;
        var title = data.items[i].title
        var price = data.items[i].price
        var quantity = data.items[i].quantity
        var image = data.items[i].image

        $("#result").append("<div class='column left'><img src=" + image + "width=100 height=100 style=padding:20px></div><div class='column middle' >" + " " + title + " " + price + "</div><div class='column right' ><input id='" + id + "' type=number min=1 max=10 step=1 value=" + quantity + " maxlength=2 size=2 /></div>");
    }
}

$(":input").bind('keyup mouseup', function() {
    $.ajax({
        url: "https://example.com/cart/change.json?callback=updateCartData",
        jsonp: "updateCartData",
        dataType: "jsonp",
        data: {
            id: $(this).attr('id'),
            quantity: $(this).val()
        },
        success: function(data) {
            console.log("quantity has been updated");
        }
    });
});