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

Posted

技术标签:

【中文标题】从 JSON 数据中获取产品 ID 并通过 AJAX 发布【英文标题】:Getting product ID from JSON data and post via AJAX 【发布时间】:2019-12-09 21:05:08 【问题描述】:

我正在使用 for 循环将返回的 JSON 数据输出到使用 javascript 的网页上,然后我试图获取项目的 ID 以通过 AJAX 调用将其发送到 API,但我已在 AJAX 中硬编码 ID ,有人可以告诉我如何在 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"); 
          
        ); 
        );
        );

【问题讨论】:

【参考方案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");
        
    );
);

【讨论】:

以上是关于从 JSON 数据中获取产品 ID 并通过 AJAX 发布的主要内容,如果未能解决你的问题,请参考以下文章

从数据库中获取并通过 db 列中的数组进行映射

从JSON中获取重复的对象键的值,并只用一个键替换返回。

通过ajax获取django的queryset数据

如何从Django数据库中的不同表中获取选定的数据并将json返回给Web客户端

如何通过 GraphQL 从 json 获取数据?

颤振:如何从 json 中获取数据?