I have used jQuery ajax for my development. Bellow i have added example code for ajax request and response.

ajax.php

$queView = array();

$queView['time'] = 40;
$queView['name'] = "Level hard";
$queView ['noQuestions'] = 10;
$queView['queDetails'] .= "<h1>Some html content</h1>";
$queView['queDetails'] .= "<img src='root/imag/imag.jpg' />";


foreach($users as $user){
   $queView['queDetails'] .= "<p>".$user['name']."</p>";
   $queView['queDetails'] .=  "<p>".$user['address']."</p>"; 
}
    
echo json_encode($queView);

Javascript function with jquery;

function showQuestions(){

 $.ajax({
        data:{showQues:'1',attemptedQue:queId,selAnswer:checkedAns,timeTaken:timeTaken},
        url:'include/ajaxAttempt.php',
        success: function(data){

            data = $.parseJSON(data);

            $('#time').html(data.time);
            $('#name').html(data.name);
            $('#noQuesitons').html(data.noQuestions);
            $('#queDetails').html(data.queDetails);
        },

        error:function(xhr,err){
            alert("Error");
        }
    });
            
}

$queView['queDetails'] has lot of html content.

Is this a good practice?

I have used jQuery AJAX for my development. Below I have added example code for AJAX request and response.

ajax.php

$queView = array();

$queView['time'] = 40;
$queView['name'] = "Level hard";
$queView ['noQuestions'] = 10;
$queView['queDetails'] .= "<h1>Some html content</h1>";
$queView['queDetails'] .= "<img src='root/imag/imag.jpg' />";


foreach($users as $user){
   $queView['queDetails'] .= "<p>".$user['name']."</p>";
   $queView['queDetails'] .=  "<p>".$user['address']."</p>"; 
}
    
echo json_encode($queView);

JavaScript function with jQuery;

function showQuestions(){

 $.ajax({
        data:{showQues:'1',attemptedQue:queId,selAnswer:checkedAns,timeTaken:timeTaken},
        url:'include/ajaxAttempt.php',
        success: function(data){

            data = $.parseJSON(data);

            $('#time').html(data.time);
            $('#name').html(data.name);
            $('#noQuesitons').html(data.noQuestions);
            $('#queDetails').html(data.queDetails);
        },

        error:function(xhr,err){
            alert("Error");
        }
    });    
}

$queView['queDetails'] has a lot of HTML content.

Is this a good practice?