Question

我的WordPress AJAX流程已成功完成，但返回的JSON对象在Chrome Devtools中显示以下错误：Uncaught TypeError：无法读取属性＆＃39; vehicle＆＃39;未定义的。我不确定为什么会这样。解析的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调用中，你已经将你的帖子字段设置为盘子，但你没有在你的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 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知识的改进，您可能需要重新访问并通过向对象添加一些方法来改进响应处理，以便更容易使用返回的数据执行set操作，但这是一个更进一步的教训。线。

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

1 个答案: