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知识的提高，您可能希望通过在对象中添加一些方法来简化此操作并通过对对象添加一些方法来改善响应处理，从而更轻松地对返回的数据执行设置操作，但这是一个更深入的学习。