AJAX запрос на возврат не верных элементов с сервера <divs>

Question

У меня есть наложение, которое появляется на экране, когда пользователь нажимает на изображение. При нажатии на изображение выполняется запрос post ajax, и он должен вернуть результат moduleID, moduleName и pageID в <div id="result">, а также content в <div id="content"> Однако я ничего не получаю?

модулей. 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>

moduleTesting AJAX. 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> 

скрипт. 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 я получаю следующее:

Answer 1

Вы не анализируете JSON, который вы получаете. Когда ваш PHP скрипт повторяет json_encode($output), вы получаете закодированную *1002* строку , которую вы затем пытаетесь использовать в качестве объекта.

Есть два варианта: сообщите вашему AJAX запросу, который вы ожидаете JSON, добавив атрибут 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);    
}

Я бы предложил первый вариант.