通過Ajax從PHP數組更新幾個元素結果

我想根據用戶的輸入（日期選擇）生成一些發票。這是這樣的：通過Ajax從PHP數組更新幾個元素結果

的invoice.php文件將讓用戶選擇從形式的日期，並根據該選擇的發票在同一頁面上的內容（如金額，客戶等）將通過Ajax進行更新。
ajaxInvoice.php將生成一個MySQL查詢，最後根據日期選擇和商家（唯一行）創建一個包含相應表格行的數組。

invoice.php

... 

<body> 

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function ajaxFunction(){ 
    var ajaxRequest; 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('field_1'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var date = document.getElementById('date').value; 
    var merchant = document.getElementById('merchant').value; 
    var queryString = "?date=" + date + "&merchant=" + merchant; 
    ajaxRequest.open("GET", "ajaxInvoice.php" + queryString, true); 
    ajaxRequest.send(null); 
} 

//--> 
</script> 

... 

<form name="invoiceDate"> 
<input type="hidden" id="merchant" value="<?php echo $merchant; ?>" /> 
Date: <select id="date"> 
<option>2013-07-23</option> 
<option>2013-07-25</option> 
</select> 
<input type="button" onclick="ajaxFunction()" value="Select Date" /> 
</form> 

... 

<div id="field_1">FIELD 1</div> 

... 

<div id="field_2">FIELD 2</div> 

... 

<div id="field_3">FIELD 3</div> 

...

ajaxInvoice.php

include_once('includes/db.php'); 

$merchant = $_GET['merchant']; 
$date = $_GET['date']; 

$merchant = mysql_real_escape_string($merchant); 
$date = mysql_real_escape_string($date); 

$query = "SELECT * FROM settlements WHERE datePayment = '$date' AND merchant = '$merchant'"; 
$result = mysql_query($query) or die(mysql_error()); 

$array = array(); 

while($row = mysql_fetch_assoc($result)) { 
    $array[] = $row; 
}

我，如果我能知道可以通過這種方式訪問該陣列：

echo $array[0]['fieldName'];

並根據不同的行字段更新頁面上的選定元素。不知道是否應該使用getElementById或getElementByName。

我的問題是如何在腳本部分以及頁面的其餘部分實際訪問php數組，以便我可以在用戶選擇後使用從數據庫查詢中獲取的相應數據更新各種div元素表格中的日期。

事實上，如果只有一個div必須更新，代碼工作得很好，但我不知道如何擴展邏輯更新多個div。

任何幫助或提示的語法或代碼邏輯將不勝感激。

非常感謝您提前！

來源

2013-07-26 Mariano Bolaños

你的問題是什麼？你的帖子很長，我在任何地方都看不到「？」。 – Halcyon

我會爲您的JS使用JS庫（如JQuery），以便簡化代碼。我也會在你的php中使用'json_encode'來返回你的數據。 – cmorrissey

我通常使用JSON：

PHP的服務器：var response = JSON.parse(ajaxRequest.responseText)

實現：

invoice.php

... 
ajaxRequest.onreadystatechange = function(){ 
    if(ajaxRequest.readyState == 4){ 
     var response = JSON.parse(ajaxRequest.responseText); 

     // Now you can use: 
     response[0]['fieldName']; 

     // Like this 
     var ajaxDisplay = document.getElementById('field_1'); 
     ajaxDisplay.innerHTML = response[0]['field_1'];     
    } 
} 
...

在客戶端上的JavaScript

... 
$array = array(); 

while($row = mysql_fetch_assoc($result)) { 
    $array[] = $row; 
} 

// Encode to JSON 
echo json_encode($array);

來源

2013-07-26 18:18:14

非常感謝您的幫助！它工作得很好。通過引用不同的fieldNames，我能夠使用多次出現的ajaxDisplay，並在具有不同ID的不同元素中獲得所需結果。 –

通過Ajax從PHP數組更新幾個元素結果

回答

相關問題