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.php
和 cart 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
我正在尝试 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.php
和 cart 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