使用jQuery从PHP Curl返回的JSON数据中提取多值子数组

嘿，这事儿我熟！我来教你怎么用jQuery从你拿到的RajaOngkir JSON数据里提取包含多个值的子数组～

首先，先明确你拿到的JSON数据结构：从你给的示例来看，完整响应里rajaongkir对象下应该有一个results数组（这就是包含多个快递报价选项的子数组，毕竟你指定了courier: "all"）。

步骤1：让JSON数据能被前端访问 #

你已经用PHP Curl拿到了JSON，那可以直接把它输出成前端能识别的变量，比如在PHP页面里写：

<?php
// 假设$jsonData是你用Curl获取到的完整JSON字符串
$jsonData = '{"rajaongkir": {...}}';
?>
<script>
// 把PHP的JSON数据转成JS变量
var shippingResponse = <?php echo $jsonData; ?>;
</script>

步骤2：提取目标子数组 #

用jQuery（其实原生JS也能搞定，但你要jQuery的话）直接访问对应的数组：

// 提取快递报价的子数组
var courierOptions = shippingResponse.rajaongkir.results;

// 先确认API请求是否成功
if (shippingResponse.rajaongkir.status.code === 200) {
    console.log('数据获取成功！', courierOptions);
} else {
    console.error('API返回错误：', shippingResponse.rajaongkir.status.description);
}

步骤3：遍历并使用子数组数据 #

拿到子数组后，你可以用jQuery的$.each()遍历它，把数据渲染到页面或者做其他处理：

// 遍历每个快递公司的选项
$.each(courierOptions, function(index, courier) {
    console.log('快递公司：' + courier.name);
    
    // 每个快递公司下还有costs数组，包含不同服务的报价
    $.each(courier.costs, function(costIndex, costItem) {
        console.log('服务类型：' + costItem.service);
        console.log('报价：Rp' + costItem.cost[0].value);
        console.log('预计送达时间：' + costItem.cost[0].etd + ' 天');
    });
});

// 把数据渲染到页面的示例
var resultHtml = '';
$.each(courierOptions, function(i, courier) {
    resultHtml += `<div class="courier-card">
        <h4>${courier.name}</h4>
        <ul>`;
    $.each(courier.costs, function(j, cost) {
        resultHtml += `<li>${cost.service} - Rp${cost.cost[0].value} (${cost.cost[0].etd} 天)</li>`;
    });
    resultHtml += `</ul></div>`;
});

// 把渲染好的内容放到页面容器里
$('#shipping-results').html(resultHtml);

如果你直接用jQuery AJAX请求PHP接口 #

如果你的PHP文件是单独处理Curl请求并返回JSON，那可以直接用AJAX获取数据：

$.ajax({
    url: 'your-shipping-api.php', // 你的PHP文件地址
    type: 'GET',
    dataType: 'json',
    success: function(response) {
        if (response.rajaongkir.status.code === 200) {
            var courierOptions = response.rajaongkir.results;
            // 这里执行上面的遍历/渲染逻辑
        } else {
            alert('获取快递报价失败：' + response.rajaongkir.status.description);
        }
    },
    error: function(xhr, status, err) {
        console.error('请求出错：', err);
    }
});

内容的提问来源于stack exchange，提问作者HiDayurie Dave