jQuery AJAX JSON請求中未捕獲的類型錯誤

Question

我的WordPress AJAX進程成功完成，但是返回的JSON對象在Chrome Devtools中顯示以下錯誤：Uncaught TypeError：無法讀取未定義的屬性“ vehicle”。 我不確定為什么會這樣。 解析的JSON數據將作為對象輸出，這應該是正確的。 下面詳細介紹了所有JavaScript和PHP代碼。 可以在此處查看示例有效的JSON對象： https : //jsfiddle.net/roaq9ew1/ 。

/**
 * Create 'Get Registration' button and append to vehicle-registration list item
 */
var getRegoButton = document.createElement('button');
getRegoButton.setAttribute('id', 'get-rego');
getRegoButton.setAttribute('class', 'get-rego');
getRegoButton.innerHTML = 'Get Registration';

var vehicleRegistrationWrapper = document.getElementById('field_2_6');
vehicleRegistrationWrapper.appendChild(getRegoButton);

/**
 * Function to retrieve Carjam API data via AJAX
 */ 
jQuery(document).ready( function($){
  $(".vehicle-details").hide();

  $("#get-rego").click(function(e){
    e.preventDefault();

    $(".vehicle-details").show();

    plate = $("#input_2_6").val();

    $.post(
      "/wp-admin/admin-ajax.php", 
      {
        "action": "get_vehicle",
        "plate": plate,
      }, 

      function(response) {
        obj = JSON.parse(response);
        console.log(typeof obj);
        console.log(obj.idh.vehicle);
      }
    );
  });

  function populateVehicleDetails(vehicleDetail, apiData) {
     var carData = ".vehicle-details span id="+vehicleDetail+"";
     $(carData).val(apiData);
  }
});

/**
 * Function to handle API call to Carjam for vehicle registration data
 */
add_action( 'wp_ajax_get_vehicle', 'prefix_ajax_get_vehicle' );
add_action('wp_ajax_nopriv_get_vehicle', 'prefix_ajax_get_vehicle');
function prefix_ajax_get_vehicle() {
  $plate = $_POST["input_2_6"];
  $testApikey = "C9DBAF2CD487DE38EC1AE78C09329E6711BF644C";
  $testApiUrl = "http://test.carjam.co.nz/api/car/?plate=";

  $url  = $testApiUrl.$plate."&key=".$testApiKey;

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $data = curl_exec($ch);
  curl_close($ch);
  $oXML = new SimpleXMLElement($data);

  echo json_encode($oXML);

  wp_die();
}

Answer 1

在您的ajax調用中，您已將您的post字段設置為plate，但您沒有在php中引用它。

更改此：

$plate = $_POST["input_2_6"];

對此：

$plate = $_POST["plate"];

您的ajax成功函數中也有錯誤：

  function(response) {
    obj = JSON.parse(response);
    console.log(typeof obj);
    console.log(obj.idh.vehicle);
  }

聲明變量obj這將使其具有全局作用域，這不是一個好習慣。 它會生成嚴格的JavaScript警告。 您不應使用此變體，而應將其聲明為var obj 。

話雖如此，在這種情況下，整個生產線都是不必要的。 您不需要JSON.parse響應，只需將json添加為yur ajax post的數據類型，其余的將由jQuery完成。 您可以在response.vehicle等中訪問返回的數據。

如果將響應JSON粘貼到JSON解析器中，您將對結構有更好的了解，並且您會看到response.vehicle實際上是一個對象，因此取決於要提取的數據位，可能更容易分配到另一個變量。 這是一個稍微修改代碼的示例：

$.post( "/wp-admin/admin-ajax.php", { "action": "get_vehicle", "plate": plate }, function( data ) {
    var vehicle = data.idh.vehicle;
    console.log( vehicle.make ); // HOLDEN
    console.log( vehicle.model );  // VECTRA
}, "json"); // Specifying "json" here tells your ajax call what type of data to expect back from the server

隨着您的javascript知識的提高，您可能希望通過在對象中添加一些方法來簡化此操作並通過對對象添加一些方法來改善響應處理，從而更輕松地對返回的數據執行設置操作，但這是一個更深入的學習。