在javascript中检索php json_encode

Question

我是JSON的新手。我有JSON数据，我想将结果追加到javascript中。

这是我的JSON数据。我使用php json_encode($data)函数将这个巨大的数组编码为JSON。

    {
         "api_status": "Success",
         "error_code": "0",
         "error_remark": "",
         "result": [
         {
               "REQ_ID": "",
               "status": "Success",
               "remarks": "",
               "rates": [
                    {
                        "rate_id": "EP-RR0914E",
                        "service_detail": "dropoff",
                        "service_id": "EP-CS09J",
                        "service_type": "parcel",
                         "courier_id": "EP-CR0C"
                     },
                     {
                        "rate_id": "EP-RR0E5HD",
                        "service_detail": "dropoff",
                        "service_id": "EP-CS08H",
                        "service_type": "parcel",
                        "courier_id": "EP-CR0DP"
                     },
                     {
                         "rate_id": "EP-RR0G5WC",
                         "service_detail": "dropoff",
                         "service_id": "EP-CS0E1",
                         "service_type": "parcel",
                         "courier_id": "EP-CR0O"
                      }
                  ]
              }
            ]
         }

我希望结果在我的javascript append中循环。我需要显示的数据。

      "rate_id": "EP-RR0G5WC",
      "service_detail": "dropoff",
      "service_id": "EP-CS0E1",
      "service_type": "parcel",
      "courier_id": "EP-CR0O"

这是我的js代码。评论部分是我尝试过的部分。但是结果是不确定的。

    $('#checkCourier').click(function() {

        $.ajax({
            data: $('#submitOrderForm').serialize(),
            type: "POST",
            url: "assets/easyparcel/checkRate.php",
            cache: false,
            success: function (data) {
                                
                //var obj = JSON.parse(data);
    
                //alert(obj.result.rates);


                //var result = obj["result"];

                //var rates = JSON.parse(result);

                //alert(result.rate_id);



                /* var len = data.length;

                for (var i = 0; i < obj.length; i++) {

                    var name = obj[i].status;
                    var logo = obj[i].courier_logo;
                  
                
                    var html  = '<label class="js-check box active" style="position: relative;">'+
                        '   <input type="radio" name="dostavka" value="option1" id="checkCourier">'+
                        '   <h6 class="title">'+name+'</h6>'+
                        '   <p class="text-muted">EasyParcel menggunakan Poslaju. Dijangka dalam 5-6 hari untuk sampai.</p>'+
                        '   <img style="position:absolute; right:10px; top:30px;"'+
                        '        src="'+logo+'" class="float-right" height="60">'+
                        '</label>';

                    $('#list_courier').append(html); 
                } */


         
            },
            error: function(data) {
                console.log(data);
            }
        });
    });

Answer 1

检查网络控制台如果您的请求得到正确响应，可能是您的PHP文件有问题。如果ajax不起作用，您可以尝试获取

Answer 2

你的obj不是你想要的。

您需要访问data.result

这是一个更简洁的版本

​

const data = { "api_status": "Success", "error_code": "0", "error_remark": "", "result": [{ "REQ_ID": "", "status": "Success", "remarks": "", "rates": [{ "rate_id": "EP-RR0914E", "service_detail": "dropoff", "service_id": "EP-CS09J", "service_type": "parcel", "courier_id": "EP-CR0C" }, { "rate_id": "EP-RR0E5HD", "service_detail": "dropoff", "service_id": "EP-CS08H", "service_type": "parcel", "courier_id": "EP-CR0DP" }, { "rate_id": "EP-RR0G5WC", "service_detail": "dropoff", "service_id": "EP-CS0E1", "service_type": "parcel", "service_type": "EP-CR0O" } ] }] };

const html = data.result.map(obj => 
  `<label class="js-check box active" style="position: relative;">
       <input type="radio" name="dostavka" value="option1" id="checkCourier">
       <h6 class="title">${obj.status}</h6>
       <p class="text-muted">EasyParcel menggunakan Poslaju. Dijangka dalam 5-6 hari untuk sampai.</p>
       <img style="position:absolute; right:10px; top:30px;"
            src="${obj.courier_logo}" class="float-right" height="60">
    </label>` + 
    obj.rates.map(rate => `<ul><li>${rate.rate_id}</li>
    <li>${rate.service_detail}</li>
    <li>${rate.service_id}</li>
    <li>${rate.service_type}</li>
    <li>${rate.service_type}</li></ul>`).join("")
)
 $('#list_courier').html(html.join(""));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list_courier"></div>

​