"Unexpected token :" 在 Shopify ajax api 中使用 jQuery 时出错

Question

Error

调用 shopify 时 ajax api 我在开发人员工具控制台中收到一条错误消息。

Uncaught SyntaxError: Unexpected token :

在 javascript 控制台中单击此错误会奇怪地显示有效的响应 JSON：

{
"id":19728251846714,
"properties":null,
"quantity":1,
"variant_id":19728251846714,
"key":"19728251846714:f1a55a69aed71e7c10ca53fd3549edda",
"title":"Ritual Petalos de rosas y vino tinto - Obispado",
"price":139900,
"original_price":139900,
"discounted_price":139900,
"line_price":139900,
"original_line_price":139900,
"total_discount":0,
"discounts":[],
"sku":"",
"grams":0,
"vendor":"Casa Azul Spa",
"taxable":false,
"product_id":1959512244282,
"gift_card":false,
"url":"\/products\/ritual-petalos-de-rosas-y-vino-tinto?variant=19728251846714",
"image":"https:\/\/cdn.shopify.com\/s\/files\/1\/0087\/2267\/7818\/products\/PETALOS_DE_ROSAS_Y_VINO_TINTO.jpg?v=1538589224",
"handle":"ritual-petalos-de-rosas-y-vino-tinto",
"requires_shipping":false,
"product_type":"",
"product_title":"Ritual Petalos de rosas y vino tinto",
"product_description":"\u0026lt;!--\ntd {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}\n--\u003eRitual Pétalos de Rosas y Vino tinto, Exquisito masaje que ofrece bienestar, relajación e hidrata la piel. Realizamos el ritual con mascarilla hidratante y antioxidante, piedras calientes, y cuarzos para ofrecer un delicioso y aromático descanso a todo el cuerpo.",
"variant_title":"Obispado",
"variant_options":["Obispado"]
}

Code

调用代码为：

jQuery.getJSON('/products/'+getProduct.product_handle+'.js', function(product) {

    product.variants.forEach(function(variant) {
      if (getProduct.sucursal == variant.title){
        jQuery.post('/cart/add.js', {
          quantity: 1,
          id: variant.id
        });
      }
    });

  });

Platforms

我正在使用模板语言 Liquid 与 Shopify 合作，在这种液体中我有一个 <script> 标签运行 AJAX 用于从 Shopify 调用方法。

More information

我知道错误一定是 javascript 语法，但正如我之前所说，我没有看到错误。

有人知道这个错误吗？

感谢每一个回答。

Answer 1

您的 URL 以 .js 结尾，这意味着服务器将以 Content-Type: application/javascript header 响应，告诉浏览器它正在发送 JavaScript。

您引用的数据是不是JavaScript，是JSON.

jQuery 正在尝试执行 JSON 就好像它是 JavaScript（因为这是服务器说它应该对数据执行的操作），但失败了。

使服务器响应 JSON 数据的正确 header：Content-Type: application/json.

您可以将 .js 替换为 .json。

Answer 2

尝试使用 jquery.ajax 调用的 long-form 手动指定所有 AJAX 参数：

jQuery.ajax({
  url:'/cart/add.js',
  type: 'post',
  dataType: 'json',
  data: { quantity:1, variant: variant.id }
  // Optional: success/error functions
})

根据其他答案，可能 jQuery 期待一种类型的响应 header 但实际上收到的是另一种类型。

如果这可行，您应该能够通过为数据类型 ('json') 提供第 4 个参数返回到使用 jQuery.post：https://api.jquery.com/jquery.post/

Answer 3

只是添加到@dave-b 的回答：通过序列化收集表单数据的 Shopify 文档的直接替代是：

  jQuery.post({
    url:'/cart/add.js',
    type: 'post',
    dataType: 'json',
    data: $('form[action="/cart/add"]').serialize()
    success: function() {
      //
    },
    error: function() {
      //
    }
  })

"Unexpected token :" 在 Shopify ajax api 中使用 jQuery 时出错

"Unexpected token :" error using jQuery with the Shopify ajax api

javascript

ajax

liquid

shopify