jQuery AJAX JSON 请求中未捕获的类型错误

Question

我的 WordPress AJAX 进程已成功完成，但返回的 JSON 对象在 Chrome Devtools 中显示以下错误：未捕获的类型错误：无法读取未定义的属性“车辆”。我不确定为什么会这样。解析的 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 字段设置为板块，但您没有在 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 this is 给它一个全局范围，这不是一个好的做法。它会生成严格的 JavaScript 警告。你不应该使用这个变种，你应该声明它var obj。

话虽如此，在这种情况下，整行是不必要的。您不需要JSON.parse 响应，您只需添加 json 作为您的 ajax 帖子的数据类型，然后 jQuery 将完成其余的工作。您可以在response.vehicle等中访问返回的数据。

如果您将响应 JSON 粘贴到 JSON parser，您会更好地了解结构，您会发现 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 知识的提高，您可能希望重新审视这一点并通过向您的对象添加一些方法来改进您的响应处理，以便更轻松地使用返回的数据执行设置操作，但这是一个更进一步的教训行。