需要使JSON AJAX請求到PHP與JSON數組返回並循環通過

Question

我有一個網頁，這就是發送一個JavaScript對象，使用JQuery的Ajax請求到一個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; 

這是PHP腳本返回的JSON數組。

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

以下是HTML中有問題的部分。

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

這是使用JQuery庫的JavaScript。

$.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'函數中，我想添加第一個名字和姓氏到人div中的html。

然後在下一個按鈕上單擊我想沿着JSON數組移動，並將下一個人firstname和surname添加到div。

感謝您的幫助！

戴夫

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(); 
}); 

這應該幫助。