將變量從Ajax傳遞到Javascript

-1

我知道這個問題已經被問及可能回答了幾次，但不是在我需要的確切上下文中，以確保我有充分的理解，我想問我的具體情況。將變量從Ajax傳遞到Javascript

我需要當一個HTML/Javascript頁面加載時，它會觸發一個服務器端調用來從數據庫中查詢一些信息。這些信息應該在服務器端形成一個數組，然後傳遞給客戶端。從客戶端，我應該能夠遍歷數組並將它們推送到客戶端數組中（我將循環和推送的原因是因爲在這種情況下，我可能需要在字符串被放入數組之前用字符串前綴某些條目）然後顯示給用戶。

我目前只看到了一個div的目標和替換，但不是一個數組的例子。

我已經嘗試了幾次不同的代碼嘗試，但可悲的是沒有運氣（並且似乎無法完全理解如何在客戶端和服務器之間傳遞值）。我相當熟悉其他語言（C＃，Python），所以當它涉及到這種東西時，我不是一個完整的newby，但這是一個相當新的JavaScript/Ajax風險投資組合。

來源

2016-09-18 Kev

當你在客戶端循環數據時 - 爲你循環的每個元素創建一個容器/行。在循環結束時，附加到頁面上的容器。 – tymeJV

顯示您遇到問題的代碼。 – trincot

我能想象的唯一答案就是指向教程的指針，它是SO的Off Topic。[一個最小的，完整的和可驗證的例子]（http://stackoverflow.com/help/mcve）你嘗試過的東西是唯一能夠從一個近距離投票候選人中提出這個問題的東西 – RiggsFolly

通常最容易在JavaScript中使用傳輸數據時，因此json_encode使用JavaScript對象符號（JSON）：

<?php 
//somearray.php 
$arr = ["bar", "baz", "kaz"]; 
header('Content-Type: application/json'); 
echo json_encode($arr);

然後你只需讓你AJAX請求使用圖書館或什麼的，解碼JSON和過程因爲如果你在JavaScript創建它的權利有：

<html> 
<body> 
<script> 
var xmlhttp = new XMLHttpRequest(); 
var url = "http://example.com/somearray.php"; 

xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var myArr = JSON.parse(this.responseText); 
     prefix(myArr); 
    } 
}; 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function prefix(arr) { 
    var output = []; 
    var i; 
    for(i = 0; i < arr.length; i++) { 
     output.push('foo ' + arr[i]); 
    } 
    console.log(output); //["foo bar", "foo baz", "foo kaz"] 
} 
</script> 
</body> 
</html>

（從http://www.w3schools.com/json/tryit.asp?filename=tryjson_http修改）

此信息應該在服務器端形成一個數組，然後傳遞給客戶端。從客戶端，我應該然後能夠遍歷數組並把它們推到客戶端陣列

這可能有助於更多閱讀了關於HTTP，它是如何「無狀態」協議，什麼一個AJAX請求實際上是在做（提示;它仍然是無狀態的），因爲它聽起來像你不瞭解服務器/客戶端數據存在的位置。

來源

2016-09-18 14:15:21 Pocketsand

好的，這裏是一個小例子，你如何做到這一點。當您使用JSON時，它實際上很簡單。使用PHP中的json_encode()，您可以輕鬆地將數組轉換爲JSON，通過AJAX接收數據並使用每個循環處理數據。

下面是代碼，您可以使用testings： HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>AJAX JSON Example</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
     <script> 
      $(function(){ 
       $.getJSON('ajax.php',function(data){ 
        $.each(data,function(index,value){ 
         $('body').append('Name: ' + value.name + ' | City: ' + value.city + '<br />'); 
        }) 
       }); 
      }); 
     </script> 
    </head> 

    <body> 

    </body> 

</html>

PHP：

<? 
// I was too lazy to set up a DB for this example. 
// You should know how to process database data in PHP 
/* 
$sql = "SELECT `id`,`name`,`city` FROM `useres`"; 
$result = $db->query($sql); 
while($array = $db->assoc($result)) 
{ 
    $json['id']['name'] = $array['name']; 
    $json['id']['city'] = $array['city']; 
} 
*/ 

// This part is only the example data which you should have received from the DB 
$json[1]['name'] = 'Test Tester'; 
$json[1]['city'] = 'Test Village'; 

$json[2]['name'] = 'Claud Atlas'; 
$json[2]['city'] = 'Haven'; 

// echo the array as JSON 
echo json_encode($json); 
?>

這裏有從上面的代碼中的活生生的例子：https://work.walter-it.de/test/ajax/

來源

2016-09-18 14:15:28

將變量從Ajax傳遞到Javascript

回答

相關問題