从 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 发布的主要内容,如果未能解决你的问题,请参考以下文章