通過Ajax傳遞一個PHP變量來更新一個幀

Question

我有一個服務器端PHP頁面，它從SQL數據庫中繪製數據來填充一個PHP變量數組。我使用每個變量的最後一個數組值來初始填充數據到表單的第三幀（即value =）。這個表單有一個「上一個」和「下一個」的鏈接，我想用它來動態填充表單的第3幀，使用「前一個」或「下一個」變量值集（即value =）動態加載整個頁面。雖然我非常熟悉javascript，php和sql，但這將是我第一次嘗試使用AJAX。我想要做的是將數組或計數器，這是一個PHP變量，傳遞給AJAX函數，該函數增加或減少數組計數器（即$計數器），以便下一組變量的值出現在框架3的形式。我的問題是，我確信我可以將當​​前的$ counter值傳遞給AJAX函數，該函數將把它作爲一個JavaScript變量處理，但是我怎樣才能將結果傳回來更新表單的第3幀中的php變量？任何幫助將非常感激。

Blacksquare：

我的php的網頁做的第一部分。它從底層SQL數據庫收集數據並將其放入一個php數組中。當網頁最初加載時，最近或最後一條記錄用於使用類似這樣的內容（value = $ dataField [$ counter]）填充全部在單個框架中的表單域。這適用於頁面最初加載時使用來自SQL數據庫中最後一條記錄的數據填充所有框架字段。我想要做的是創建一個AJAX函數，通過點擊「下一個」或「前一個」鏈接（即一個onclick事件）來激活，該鏈接採用$ counter計數器值並將其增加或減少1（1），然後刷新同一幀中「下一個」或「前一個」php數組記錄中的幀顯示字段，而無需重新加載頁面。

Answer 1

您需要創建一個php文件，它將處理ajax請求（將變量作爲post參數傳遞）並在php文件中回顯您的響應。

然後在ajax文件中，您將獲得成功的響應，更新使用jQuery的響應到表單中。

注意：不要忘記在php文件中的響應之後放置'exit'。

例如：

$.post("test.php", { counter: <?php echo $counter; ?>}).done(function(data) { alert("Data Loaded: " + data); }); 

Answer 2

關於使用JavaScript你Ajax調用的結果後改變相應的HTML元素是什麼？無需設置php變量，然後使用該字段在HTML中設置值，然後您可以直接使用JavaScript更改該HTML值。

Answer 3

您無法將變量傳遞迴由php生成的靜態頁面。可能最好的方法是隻加載頁面加載時的表單。然後使用ajax調用服務器端的另一個php腳本獲取動態數據（我使用jQuery作爲ajax）。

$.ajax({ 
    type: "GET", 
    url: someURL, //A link to your php script that will load the data 
    dataType: "json" //Ask for json data from the server 
}).done(function(data) { 
    nextRecords = data; 
    getNextRecord(); 
}).fail(function(resp) { 
    console.log("Something Went Wrong"); 
}); 

移動你的SQL邏輯，在someURL進入一個單獨的PHP腳本，有PHP傳回JSON數據數組這樣

$query = ...Your select query returning an array of results 
echo json_encode($query); 
exit; 

現在，當用戶點擊一個/上一個按鈕，你可以輕鬆獲取最新的記錄而無需發佈到服務器。

function getNextRecord() { 
    if (nextRecords.length > 0) { 
     var record = nextRecords.pop(); 
     var node = document.getElementById(node_name); 
     node.innerHTML = record; 
     if (currentRecord){    
      prevRecords.push(currentRecord); 
     } 
     currentRecord = record; 
    } 
} 

function getPreviousRecord() { 
    if (prevRecords.length > 0) { 
     var record = prevRecords.pop(); 
     var node = document.getElementById(node_name); 
     node.innerHTML = record; 
     if (currentRecord) {    
      nextRecords.push(currentRecord); 
     } 
     currentRecord = record; 
    } 
}