[英]Getting product ID from JSON data and post via AJAX
I am using a for loop to output returned JSON data onto a webpage using javascript, then I am trying to get the id of the item to send it to the API via an AJAX call but I have hardcoded the id in the AJAX, could someone tell me how to send the id dynamically in the AJAX function. 我正在使用for循环,使用javascript将返回的JSON数据输出到网页上,然后我试图获取商品的ID,以通过AJAX调用将其发送到API,但是我已经将ID硬编码在AJAX中,有人告诉我如何在AJAX函数中动态发送ID。 Also, do I need the missing callback function in the AJAX (updateCartData),thank you in advance! 另外,我是否需要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");
}
});
});
});
When generating the inputs, add the item Id to the input. 生成输入时,将项目ID添加到输入中。 In your Ajax call, just use $(this).attr('id')
for the id and $(this).val()
for the quantity. 在您的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");
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.