AJAX要求は正しい<のdiv>で、サーバーからアイテムを返しません

TC：

私は、ユーザーが画像をクリックすると、画面に表示されるオーバーレイを持っています。画像がクリックされると、ポストのAjaxリクエストが実行され、それが結果を返す必要がありmoduleID、moduleNameかつpageIDに<div id="result">、それはまた返す必要がありますcontentに<div id="content">しかし、私はまったく何も得ますか？

modules.php：

<div class="grid-2 dashboardIcons module">
    <h3 class="fontAmaticH1">Critical Writing</h3>
        <a class="cursor module" onclick="toggleWindow(); getModuleData(4)"><img value="4" src="images/CriticalWriting.png">
        </a>
</div>

<div id="result"> <!-- Should be returning data from db here -->
</div>
<div id="content"> <!-- and here -->
</div>

moduleTestingAJAX.php：

<?php

require 'scripts/db.php';

$moduleID = $_POST['moduleID'];
$pageID = 1;

if(isset($_POST['moduleID']))
{


    //$stmt = $conn->prepare ("SELECT * FROM `module` WHERE moduleID = ?");
    $stmt = $conn->prepare ("SELECT `module`.`moduleID`, `module`.`moduleName`,`moduleContent`.`pageID`, `moduleContent`.`content` FROM `moduleContent` INNER JOIN `module` ON `module`.`moduleID` = `moduleContent`.`moduleID` WHERE `moduleContent`.`pageID` = ? AND `moduleContent`.`moduleID` = ? ");    
    $stmt->bind_param("ii", $pageID, $moduleID);
    $stmt->execute();
    $result = $stmt->get_result();
    $output = [];

    while($row = $result -> fetch_assoc()) {
        $output["result"] = $row['moduleID'].' '.$row['moduleName'].' '.$row['pageID'];

        $output["content"] = $row['content'];

    }

    echo json_encode($output);
}
 ?>
</div> 

script.js：

// When user clicks open a module, pass the moduleID through in an ajax request to get data from the db
function getModuleData(moduleID){
  console.log(moduleID);
  $.ajax({  
      url: "moduleTestingAJAX.php",  
      method: "post",   
      data: {moduleID:moduleID},
      success: function(data){  
            console.log(data);
            $('#result').html(data.result);    
            $('#content').html(data.content);    
      }  
  });
  console.log("test");
}

どのテーブルに保持されています moduleContent

実行した後にconsole.log(data);、AJAX呼び出しの中で、私はこれが返さ取得します：

El_Vanja：

あなたは、あなたが受け取るJSONをパースしていません。PHPスクリプトのエコーがするとjson_encode($output)、あなたが取得しているJSONは、エンコードされた文字列あなたがオブジェクトとして使用しようとすると、。

そこの2つのオプションがあり、どちらか追加することによって、あなたはJSONを期待しているあなたのAJAX要求を伝えるdataType属性を：

$.ajax({  
      url: "moduleTestingAJAX.php",  
      method: "post",   
      data: {moduleID:moduleID},
      dataType: 'json', // <-- this line added
      success: function(data){
            $('#result').html(data.result);    
            $('#content').html(data.content);    
      }  
});

それとも、あなたは手動であなたの成功関数の内部でJSONを解析できます。

success: function(data){
    parsedData = JSON.parse(data);
    $('#result').html(parsedData.result);    
    $('#content').html(parsedData.content);    
}

私は最初のオプションをお勧めしたいです。