Необходимо сделать JQuery AJAX-запрос к PHP с возвращенным массивом JSON и циклически

Question

У меня есть веб-страница, которая отправляет запрос Ajax с объектом javascript, используя JQuery, в скрипт PHP, который обрабатывает данные и затем возвращает массив JSON.

Затем мне нужно представить первые элементы в массиве в HTML DIV и одним щелчком мыши переключить HTML, чтобы представить следующие элементы в массиве.

Вот код PHP-скрипта.

$arr[] = array("firstname"=>"Mike", "surname"=>"Jones");
$arr[] = array("firstname"=>"James", "surname"=>"Smith");
$arr[] = array("firstname"=>"Jenny", "surname"=>"Williams");

$json = json_encode($arr);
echo $json;

Вот массив JSON, который возвращает скрипт PHP.

[
{
    "firstname": "Mike",
    "surname": "Jones"
},
{
    "firstname": "James",
    "surname": "Smith"
},
{
    "firstname": "Jenny",
    "surname": "Williams"
}
]

Вот части, о которых идет речь, в HTML.

<div id="person"><div>
<button id="next">Next Person</button>

Вот JavaScript, использующий библиотеку JQuery.

$.ajax({
type: "POST",
url: "request.php",
dataType: 'json',
data: datasend,
success: handleRequest
});

function handleRequest(response) 
 {
 var jsondata = response;
 //want to show the first, firstname and surname within person div, from json array
 //$('#person').html("Firstname =" + firstnamevar + "Surname = " + surnamevar);
 }

$('#next').click(function() 
  {
  //want to move to the next firstname and surname, in the son array
  });

В функции handleRequest я хочу добавить имя и фамилию в html внутри персонажа div.

Затем, нажав следующую кнопку, я хочу переместиться по массиву JSON и добавить имя и фамилию следующих людей в div.

Спасибо за любую помощь!

Dave

Answer 1

function handleRequest(response) 
{
    responseArray = response;

    showOnePerson();
}

var arrayIndex = 0;
var responseArray = null;

function showOnePerson(){
    // check if there still are names in the array
    if(!responseArray[arrayIndex]) return false;

    $('#person').html("Firstname =" + responseArray[arrayIndex].firstname + "Surname = " + responseArray[arrayIndex].surname);
    arrayIndex++;
}

$('#next').click(function() 
{
    //want to move to the next firstname and surname, in the son array
    showOnePerson();
});

Это должно помочь.