Wie kann ich Informationen von MySQL mit Ajax erhalten?

Question

Also versuche ich Ajax mit jQuery zu lernen, um einige Informationen zu erhalten. Im Moment habe ich Probleme, die Informationen zu bekommen. Mein Code ist im Moment sehr einfach, nur weil ich lernen möchte, wie es funktioniert. Dies ist mein HTML-Code.

<h2>Hello world</h2> 
<p id="response"></p> 

Mein jQuery-Code:

$(function(){ 
$('h2').on('click', function() { 
    $.ajax({ 
    url: "ajax.php", 
    type: "get", 
    datatype: "json", 
    success: function(data){ 
    $.each(data, function(i, key){ 
     $("#response").html(key['name']) 
    }); 
    }, 
    error: function(data){ 
    console.log("tjohejsan"); 
    } 
    }) 
}); 
}); 

Also, wenn ich auf h2 klicken sie Daten abrufen soll. Ich möchte von meiner Datenbank aus anrufen, um Informationen über die Benutzer zu erhalten.
So sieht mein PHP-Code wie folgt aus:

$sql = "SELECT * FROM moment2"; 
$result = mysqli_query($db,$sql) or die("Fel vid SQL-fråga"); 

$array = array(); 
while($row = $result->fetch_assoc()) 
{ 
    $array[] = $row; 
} 
echo json_encode($array); 

An diesem Punkt das ist, wo sie versagt. Ich weiß nicht wirklich, wo das Problem liegt. Weil ich ein assoziatives Array möchte.
Ich würde es schätzen, wenn Sie mir helfen könnten, weil ich, wie ich erwähnt habe, nicht wirklich weiß, wie man es von hier löst.

Vielen Dank im Voraus!

EDIT: Ich erkannte, dass ich einen Tippfehler hatte, während ich dies schreibe. Ändern von Daten [ ‚name‘] auf die Taste [ ‚name‘]

Answer 1

Es gibt ein paar Orte dass du damit in Schwierigkeiten gerätst. Hier ist ein JSFiddle für Sie meine Tipps zu verweisen unter:

https://jsfiddle.net/MrProvolone/zgw9ymv3/2/

Es gibt ein paar Dinge zu beachten ...

1). Ihre zurückgegebenen Daten müssen mithilfe von parseJSON() konvertiert werden, einer integrierten jQuery-Funktion. Dadurch wird Ihre JSON-Zeichenfolge in ein JavaScript-Objekt konvertiert.

2). Wenn Sie Ihr Objekt durchlaufen, müssen Sie die Nummer (i) eingeben, auf die Sie zugreifen möchten.

3). Da wir eine neue Objektvariable erstellen, brauchen wir nicht den "key" Bezeichner in Ihrem $ .each() Funktionsaufruf ... , so dass es $ .each wird (Daten, Funktion (i) {}); anstelle von $ .each (Daten, Funktion (i, Schlüssel) {});

3). Wenn Sie versuchen, Ihren HTML-Code zu schreiben, müssen Sie den Inhalt des Containers abfangen, dann Ihren neuen HTML-Code hinzufügen und ihn schließlich wieder in den Container schreiben.Hier

ist ein Schritt für Schritt:

Statt:

success: function(data){ 
$.each(data, function(i, key){ 
    $("#response").html(key['name']) 
}); 
} 

Wir müssen das Parsen (und entfernen Sie den "Schlüssel" Variable pro # 3 oben) hinzuzufügen, so wird es diese :

success: function(data){ 
    var parsed = jQuery.parseJSON(data); 
    $.each(data, function(i){ 
     $("#response").html(key['name']); 
    }); 
} 

Jetzt haben wir eine neue Variable aus dem (analysiert) arbeiten, so müssen wir sowohl die $ .each Linie, und die .html() Linie um sicherzustellen, dass es u ändern ses, die neue Variable ....

So folgt aus:

$.each(data, function(i, key){ 
    $("#response").html(key['name']); 
}); 

dies zu:

$.each(parsed, function(i){ 
    $("#response").html(parsed['name']); 
}); 

Aber das wird immer noch nicht. Wir schleifen durch das Objekt. Wenn wir also versuchen, auf einen Wert zuzugreifen, müssen wir angeben, welches Element in dem Objekt, zu dem wir gelangen wollen. Also überall in der Schleife, die wie folgt aussieht:

parsed['keyname'] 

wird dieses:

parsed[i]['keyname'] 

So, jetzt haben wir:

$.each(parsed, function(i){ 
    $("#response").html(parsed[i]['name']); 
}); 

An diesem Punkt sollten Sie einige html bekommen in Ihrem Container. Sie werden jedoch feststellen, dass Sie nur den Wert der letzten Zeile Ihrer Daten erhalten. Das liegt daran, dass Sie ALLE HTML-Dateien im Container in jeder Schleife überschreiben, anstatt zu dem hinzuzufügen, was bereits vorhanden ist. Wir müssen eine neue Variable erstellen, um dies zu beheben. So folgt aus:

$.each(parsed, function(i){ 
    $("#response").html(parsed[i]['name']); 
}); 

dies zu:

$.each(parsed, function(i){ 
    var oldhtml = $("#response").html(); 
    $("#response").html(oldhtml + '<br>' + parsed[i]['name']); 
}); 

Jetzt werden Sie jedes Ergebnis sehen, mit einem HTML-Zeilenumbruch zwischen jedem.

Hoffe, das hilft!

Answer 2

In Ihrem js, auf den Erfolg Rückruf, Sie werden die falschen Daten verwenden und die Daten nicht zu dem HTML-Tag abgerufen anhängt

Hier ein essai

success: function(data){ 
    if(typeof data != "object"){ 
     data = JSON.parse(data); 
    } 
    $.each(data, function(i, key){ 
     $("#response").append(key['name']) 
    }); 
} 

Answer 3

Sie haben in der jquery jede Funktion. Ersetzen Sie die Erfolgsfunktion als

success: function(data){ 
    $.each(data, function(i, key){ 
     $("#response").html(key['name']) 
    }); 
    }, 

Es ist, weil jquery jede Funktionstaste und den Wert als Argument hat, also nur ersetzen „Daten“ durch „Schlüssel“ in der diese Zeile: $("#response").html(data['name'])