jQueryのAJAX JSONリクエストのキャッチされていないタイプのエラー

Question

My WordPress AJAXプロセスが正常に終了しましたが、返されたJSONオブジェクトはChrome Devtoolsに次のエラーを表示しています：Uncaught TypeError：なぜこれが起こっているのか分かりません。解析された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の成功の機能にエラーがある

：これはだった変数objを宣言

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

はできますグローバルな範囲であり、良い習慣ではありません。厳密なJavaScript警告が生成されます。このバリアントは使用しないでください。var objと宣言してください。

は、この場合には、全体のラインが不必要なことであると述べました。応答がJSON.parseである必要はありません.yur ajaxのデータ型としてjsonを追加するだけで、jQueryが残りの処理を行います。あなたはこれの何ビットに応じて、あなたはJSON parserへのあなたの応答JSONを貼り付ける場合は、構造のより良いアイデアを得るでしょうし、あなたがresponse.vehicleが実際のオブジェクトであることがわかりますなど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の知識があなたはそれが簡単にセットアクションを実行するために作るためにあなたのオブジェクトにいくつかのメソッドを追加することで、これを再検討し、あなたの応答の処理を改善することもできますが向上したよう返されたデータがありますが、これは少し下のレッスンです。