BigCommerce API - PHP AJAX 在购物车上重量 Returns

BigCommerce API - PHP AJAX on Cart for Weight Returns

我正在尝试 return 产品重量,以便它们显示在我的客户的购物车上。

在购物车模板中,我从 BigCommerce 的购物车模板中调用这个外部 JS 文件

店面:https://store-xxx.mybigcommerce.com/cart.php 或后端模板:cart.html

$(document).ready(function () {

var url = 'http://xxxx.com/cartProduct.php';
var prodWeights;    


 $(".prod_SKU").each(function () {

    $.ajax({
        url: url, 
        method: 'POST',
        dataType: "json",
        data: {sku: $(this).text()},
        contentType: "application/json; charset=utf-8",
        async: false,
        crossDomain: true,

        success: function (result) {
             prodWeights = result;
        },
        error: function (request, textStatus, errorThrown) {
            console.log(request.responseText);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });    
});



 console.log(prodWeights);


 });

所以它将 SKU 正确地传递给 PHP 文件,"cartProduct.php":

<?php

 $sku = $_POST['sku'];

 $api_url = 'https://store-xxxxxx.mybigcommerce.com/api/v2/products?sku=' . sku;
 $ch = curl_init(); curl_setopt( $ch, CURLOPT_URL, $api_url ); 
 curl_setopt( $ch, CURLOPT_HTTPHEADER, array ('Accept: application/json', 'Content-Length: 0') );                                   
 curl_setopt( $ch, CURLOPT_CUSTOMREQUEST, 'GET'); 
 curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, 0 ); 
 curl_setopt( $ch, CURLOPT_USERPWD, "xxxxx:xxxxxxxxxxxx" ); 
 curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 0 );
 curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );   
 $response = curl_exec( $ch );   
 $result = json_decode($response); 
 print_r($result);


 ?>

我认为可能存在授权问题,当我尝试将我的 PHP 作为 "http://" 时,我收到此错误:

当我尝试 "https://" 时,我得到了这个:

我假设 cartProduct.phpcart template 使 XMLHttpRequest 驻留在同一个域中。 例如

xxx.com/cart.php ->
XmlHttpRequest to xxx.com/cartProduct.php ->
cURL SSL-Request to store-xxx.com ->
output to browser

否则请参阅 Same-Origin Policy 并配置一个 JSONP 请求 insead。

确保在 jQuery 使用 dataType: "json" 时设置响应 header 的 Content-Type。 JQuery 在使用时应用接受 application/json, text/javascript 请求 header。

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason.

您应该发送编码值,而不是 print_r 的解码变量输出,因为它对输出应用 PHP 特定格式。

示例:

$json = '{"a": "b"}';
print_r(json_decode($json));

会输出

stdClass Object
(
    [a] => b
)

JSON 语法无效。

所以在cartProduct.php

 <?php
 ob_start();
 $sku = $_POST['sku'];

 $api_url = 'https://store-xxxxxx.mybigcommerce.com/api/v2/products?sku=' . sku;
 $ch = curl_init();
 //...
 ob_end_clean();
 header('Content-Type: application/json');
 $response = curl_exec($ch); 
 echo $response;
 exit;

一定要删除结尾的 php 脚本标记,因为任何行结尾或之后的包含文件都会在输出中呈现额外的换行符,并导致提交额外的数据。

您的 console.log(prodWeights); 需要在您的 success 函数调用中,因为在进行 ajax 调用之前,该变量对 javascript 不可用。

例如ajaxRequest -> console.log(prodWeights) -> success -> declare prodWeights

因此脚本需要更改为

 success: function (result) {
    var prodWeights = result;
    console.log(prodWeights);
 },

通过使用相对 URI var url = '/cartProduct.php';,您的 url 可以更容易地转换为客户端的当前协议 var url = '/cartProduct.php'; 否则,如果您不想同时支持这两种协议,请确保将用户重定向到正确的协议,如果你还没有。


最后但同样重要的是,你应该投入一些研究 jQuery .queue and .deferred methods instead of using async: false. non-asynchronous requests are depreciated and will eventually be removed from browsers (like Java and npapi), which your developer window warns you about at the top of the console output. See: XMLHttpRequest Spec

示例:https://jsfiddle.net/4r2avewo/(异步 ajax 链,带有实时代码,在控制台中查看 XHR 状态以验证正在链化的请求)

var def = $.Deferred();
var promise = def.promise()
$('.prod_SKU').each(function() {
  var sku = $(this).text();
  //this creates the chaining
  promise = promise.then(function() {
    return $.ajax('/path/to/resource.php', {
      method: 'post',
      dataType: 'json',
      data: {'sku': sku},
      success: function(result) {
        console.log(result);
      }
    });
  });
});
promise.done(function(){
    //do something after the last request has completed
});
def.resolve(); //start the ajax request chain