2016-07-18 5 views
0

Hallo Leute, ich habe eine Frage, die ich nicht mit JQuery kenne. Also sagen wir, ich habe einen Link. Mit einem Klick auf diesen Link möchte ich zufälligen Inhalt von einem MySQL in ein div mit einer kleinen Ladeanimation laden, ohne die Seite neu laden zu müssen. Wie geht das?Wie zufällige Inhalte von MySql in div mit JQuery onclick geladen werden?

Dies ist mein div ich möchte in der mysql-output von jquery aufrufen laden.

Dies ist die Schaltfläche, die vom Benutzer angeklickt wird und den zufälligen Inhalt von mysql in das div laden soll.

<a class="btn btn-success show_new_" href='#'>Load new random content into div</a> 
+0

müssen Sie einen Anruf an die Datenbank mit Ajax –

+0

@ j.Doe machen, wie es geht ein schnelles Beispiel Kumpel gehen? – Phil

+5

versuche hier einen zu lesen. [Mit Jquery Ajax zum Abrufen von Daten aus Mysql] (http://stackoverflow.com/questions/16707648/using-jquery-ajax-to-retrieve-data-from-mysql) –

Antwort

0

Sie müssen einige Server-Seite Code und einige Client-Seite.

Eine gute Wahl für Ihren Anwendungsfall ist immer JSON statt Klartext.

Die einfachste Server-Seite in PHP ist wahrscheinlich diese:

<?php 
$host="localhost"; 
$username="youruser"; 
$password="yourpass"; 
$db_name="yourdb"; 
$db_query="yourquery"; 

$mysqli = new mysqli("$host", "$username", "$password", "$db_name"); 
if ($mysqli->connect_errno) { 
    echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error; 
} 

$mysqli->real_query($db_query); 
$res = $mysqli->use_result(); 
$rows = array(); 
while ($row = $res->fetch_assoc()) { 
    $rows[] = $row; 
} 

print(html_entity_decode(json_encode($rows)); 
?> 

Wie ein Asynchron-AJAX-Aufruf mit jQuery machen können Sie schöne Beispiele finden Sie hier: http://api.jquery.com/jquery.getjson/

Wie das Click-Ereignis zu handly sehen, was @Loadx hat geschrieben. Natürlich können Sie die PHP-Ausgabe in reinen Text ändern, aber ich würde Ihnen raten, die HTML-Server-Seite nicht zu generieren, wenn Sie sowieso JavaScript verwenden.

+0

ist dies auch ein guter Weg oder ist Ihr Weg viel schneller? ' Abfrage ($ sql) als $ Zeile) { echo "$ row ['witz']"; } ?> ' – Phil

+0

Mit so wenig Daten berechnet und übertragen macht es wahrscheinlich keinen großen Unterschied. PDO vs MySQLi: http://code.utsplus.com/tutorials/pdo-vs-mysqli-which-should-you-use--net-24059 JOSN vs Klartext: Es wird einfach ein Chaos, wenn Sie generieren Sie Ihre HTML-Server-Seite, während Sie Ihre DOM-Client-Seite bearbeiten. –

+0

Ich verstehe nicht, mein Englisch ist nicht gut, also bitte sagen Sie mir nur, welche Art zu verwenden, das ist nicht zu versauen. Thx – Phil

0

Die Dokumente erklären es ziemlich gut. http://api.jquery.com/load/

$(document).ready(function(){ 
    $('.show_new_').on('click', function(){ 
    $('.joketext').load('/path/to/some/script'); 
    }); 
}); 

Etwas darauf hinweisen, ein id Attribut zu Ihrem HTML hinzuzufügen. Es sei denn, Sie haben nur einen Gegenstand, der die Klasse verwendet. Andernfalls würde der Ajax für alle Gegenstände mit dieser Klasse passieren.

Sie müssen das Skript erstellen, die die Daten von MySQL packt sicher, dass es auch anders auf der gleichen Domain ist werden Sie in dieses Problem:

https://en.wikipedia.org/wiki/Same-origin_policy

Verwandte Themen