2016-09-18 4 views
-1

Ich weiß, diese Frage wurde gestellt und möglicherweise ein paar Mal beantwortet, aber nicht in dem genauen Kontext, den ich brauche, um sicherzustellen, dass ich volles Verständnis habe, wollte ich mit meinem spezifischen Szenario fragen.Weitergabe von Ajax an Javascript

Ich benötige, dass beim Laden einer HTML/JavaScript-Seite ein serverseitiger Aufruf zur Abfrage einiger Informationen aus der Datenbank ausgelöst wird. Diese Information sollte dann auf der Serverseite ein Array bilden, das dann an den Client übergeben werden kann. Vom Client aus sollte ich dann in der Lage sein, das Array zu durchlaufen und in das clientseitige Array zu schieben (der Grund dafür wäre, dass ich in diesem Kontext einige Einträge mit Strings versehen müsste, bevor sie in das Array eingefügt werden)), die dann dem Benutzer angezeigt wird.

Ich habe derzeit nur Beispiele gesehen, wo ein div Ziel und ersetzt wird, aber kein Array.

Ich habe versucht ein paar verschiedene Code-Versuche, aber leider hatte kein Glück (und scheint nicht vollständig zu verstehen, wie Werte zwischen Client und Server übergeben).

Für was es wert ist, bin ich ziemlich versiert mit anderen Sprachen (C#, Python), also bin ich kein komplettes newby, wenn es um solche Sachen kommt, aber das ist ein ziemlich neues Unterfangen in Javascript/Ajax.

+0

Wenn Sie die Daten auf dem Client schleifen, erstellen Sie für jedes Element, das Sie loopen, einen Container/eine Zeile. Hängen Sie am Ende der Schleife an den Container auf der Seite an. – tymeJV

+0

Zeigen Sie den Code an, mit dem Sie Probleme haben. – trincot

+1

Die einzige Antwort, die ich mir vorstellen kann, wäre ein Zeiger auf ein Tutorial, das Off Topic für SO ist.[Ein minimales, vollständiges und überprüfbares Beispiel] (http://stackoverflow.com/help/mcve) von dem, was Sie versucht haben, ist das einzige, was diese Frage von einem engen Wahlkandidaten aufwerfen würde – RiggsFolly

Antwort

0

Allgemeinen einfachste JavaScript Object Notation (JSON) verwenden, wenn Daten zur Verwendung in JavaScript zu transportieren, damit json_encode:

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

Dann einfach Sie machen Sie AJAX-Request eine Bibliothek oder was auch immer, dekodieren die JSON und Prozess als ob Sie es erstellt direkt in der 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> 

(von http://www.w3schools.com/json/tryit.asp?filename=tryjson_http modifiziert)

Diese Information sollte dann auf der Serverseite ein Array bilden, das dann an den Client übergeben werden kann. Von dem Client sollte ich dann in einer Schleife durch das Array der Lage sein, und schieben Sie sie in der Client-Seite Array

Es könnte helfen mehr über HTTP zu lesen, wie es ein „stateless“ Protokoll ist und was für eine AJAX-Anforderung tut tatsächlich (Hinweis; es ist immer noch zustandslos), weil es sich anhört, als ob Sie nicht verstehen, wo Daten auf den Server/Client-Seiten existieren.

0

Okay, hier ist ein kleines Beispiel, wie Sie es tun können. Es ist eigentlich ziemlich einfach, wenn Sie mit JSON arbeiten. Mit json_encode() in PHP können Sie Arrays einfach in JSON konvertieren, sie über AJAX empfangen und die Daten mit einer each-Schleife verarbeiten.

Hier ist der Code, mit dem Sie für testings verwenden: 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); 
?> 

Hier haben Sie ein anschauliches Beispiel aus dem Code oben: https://work.walter-it.de/test/ajax/

Verwandte Themen