Ajax将内容从json数组加载到div中

Question

My webpage is supposed to generating a series of questions in a random order. Each question is a seperate HTML page with a picture and multiple options.On page load, there should a default question and thereafter on clicking next a new page is loaded. I am currently:

1. Creating a php array with the names of the html pages and shuffling it.
2. Converting this array into a json array to be accessed in Javascript.
3. Trying to ajax load the page.

I am stuck at the third step; how do you send a json array element in an ajax call ie

$.ajax({
  url: name+".html",
  success: function(html){
    $("#container").empty().append(html);
  }
});

where name is the name of the webpage stored in the json array and container is the div on my current php page. In case there is an easier way of doing the above task, I am open to that too.

Thanks!

EDIT Step 2:

         var xdata = <?php echo json_encode($testArray); ?>;

where $testArray is the php shuffled array of webpages.

Answer 1

$.ajax({ url: name+".html", success: function(html)     
                $("#container").empty().append(html);                           
                }                                      
                });

there are 1 '{' and 2 '}' try

$.ajax({ url: name+".html", success: function(html){     
                $("#container").empty().append(html);                           
                }                                      
                });

Answer 2

Use the jQuery load function .

var pageToLoadIntoContainer = 'Test1.html';

$('#container').load( pageToLoadIntoContainer );

Extending this answer to try and solve all of your elements...

<?php

$pageArray = shuffle(array(
  'Test1' ,
  'Test2' ,
  'Test3'
));

....

?>
<script>

var pageArray = <?php echo json_encode( $pageArray ); ?>;

....

$('#container1').load( pageArray[0] );
$('#container2').load( pageArray[1] );
$('#container3').load( pageArray[2] );

</script>