jQuery sendet über Ajax eine Anfrage an den PHP-Server und gibt JSON-Daten zurück

In diesem Artikel wird hauptsächlich das Senden von Anforderungen an den PHP-Server über Ajax und die Rückgabe von JSON-Daten vorgestellt. Interessierte Freunde können mehr über die Rückgabe von JSON durch jQuery erfahren >JSON (JavaScript Object Notation) ist ein leichtes Datenaustauschformat. Für Menschen leicht zu lesen und zu schreiben und für Maschinen leicht zu analysieren und zu generieren. JSON spielt eine hervorragende Rolle im Prozess der Front-End- und Back-End-Interaktion.

Das serverseitige PHP liest MYSQL-Daten, wandelt sie in JSON-Daten um, übergibt sie an das Front-End-Javascript und verarbeitet die JSON-Daten. In diesem Artikel wird anhand von Beispielen demonstriert, dass jQuery über Ajax eine Anfrage an den PHP-Server sendet und JSON-Daten zurückgibt. Leser, die diesen Artikel lesen, sollten über entsprechende Kenntnisse in jQuery, Ajax und PHP verfügen und diese geschickt einsetzen können.

XHTML

<ul id="userlist"> 
  <li><a href="#" rel="1">张三</a></li> 
  <li><a href="#" rel="2">李四</a></li> 
  <li><a href="#" rel="3">王五</a></li> 
</ul> 
<p id="info"> 
  <p>姓名：<span id="name"></span></p> 
  <p>性别：<span id="sex"></span></p> 
  <p>电话：<span id="tel"></span></p> 
  <p>邮箱：<span id="email"></span></p> 
</p>

Im Beispiel werden eine Liste mit Benutzernamen ul#userlist und eine Benutzerdetailsehe #info angezeigt . Es ist erwähnenswert, dass ich das Attribut „rel“ setze und jedem 3499910bf9dac5ae3c52d5ede7383485-Tag einen Wert zuweise. Dies ist sehr wichtig und wird in jQuery verwendet. Der Effekt, den ich erzielen möchte, ist: Wenn Sie auf den Namen eines Benutzers in der Benutzerliste klicken, werden sofort die detaillierten Informationen des Benutzers wie Telefonnummer, E-Mail usw. angezeigt.

CSS

#userlist{margin:4px; height:42px}

#userlist li{float:left; width:42px; ; Höhe: 42 Pixel; Schriftgröße: Fett info p{line-height:24px}

#info p span{font-weight:bold}

CSS legt das Erscheinungsbild der Benutzerliste und Benutzerdetails fest. Sie können auch ein ansprechendes Design erstellen eins selbst Aussehen.


jQuery

Bevor Sie jQuery verwenden, vergessen Sie nicht, sicherzustellen, dass die jQuery-Bibliothek geladen ist.

<script type="text/javascript" src="../js/jquery.js"></script>

Der nächste Schritt besteht darin, mit dem Schreiben von jQuery-Code zu beginnen.

$(function(){ 
  $("#userlist a").bind("click",function(){ 
    var hol = $(this).attr("rel"); 
    var data = "action=getlink&id="+hol; 
     
    $.getJSON("server.php",data, function(json){ 
      $("#name").html(json.name); 
      $("#sex").html(json.sex); 
      $("#tel").html(json.tel); 
      $("#email").html(json.email); 
    }); 
  }); 
});

Ich binde ein Klickereignis an jedes 3499910bf9dac5ae3c52d5ede7383485-Tag in der Benutzerliste. Wenn auf den Benutzernamen geklickt wird, werden die folgenden Vorgänge ausgeführt: Den Wert des Attributs „rel“ des aktuellen Tags abrufen und bilden Sie eine Datenzeichenfolge: var data = "action=getlink&id="+hol, und senden Sie dann eine JSON-Anfrage über Ajax an den Server server.php. Nach Erhalt der Hintergrundantwort werden die JSON-Daten zurückgegeben und die erhaltenen Daten zurückgegeben in den Benutzerdetails angezeigt.

PHP

Nach dem Empfang der Front-End-Ajax-Anfrage stellt der Backend-Server.php über die übergebenen Parameter eine Verbindung zur Datenbank her, fragt die Benutzertabelle ab und konvertiert die entsprechende Benutzerinformationen in ein Array $list und konvertieren Sie das Array schließlich in JSON-Daten. Informationen zum Betrieb von PHP und JSON finden Sie in den auf dieser Website gesammelten Artikeln: Anwendung von JSON in PHP. Das Folgende ist der detaillierte Code von server.php. Der Datenverbindungsteil wird weggelassen. Bitte stellen Sie die Datenverbindung selbst her.

include_once("connect.php"); //连接数据库 
$action=$_GET[action]; 
$id=intval($_GET[id]); 
if($action=="getlink"){ 
  $query=mysql_query("select * from user where id=$id"); 
  $row=mysql_fetch_array($query); 
  $list=array("name"=>$row[username],"sex"=>$row[sex],"tel"=>$row[tel],"email"=>$row[email]); 
  echo json_encode($list); 
}

In diesem Artikel erfahren Sie, dass jQuery JSON-Anfragen über Ajax an den Server sendet. Die Methode $.getJSON ist sehr praktisch und einfach. Und die vom Server zurückgegebenen Daten können analysiert werden, um den Inhalt der entsprechenden Felder zu erhalten, was einfacher und schneller zu verarbeiten ist als eine große Zeichenfolge, die von einer HTML-Anfrage zurückgegeben wird. Schließlich ist die MySQL-Tabellenstruktur beigefügt

CREATE TABLE IF NOT EXISTS `user` ( 
 `id` int(11) NOT NULL auto_increment, 
 `username` varchar(100) NOT NULL, 
 `sex` varchar(6) NOT NULL, 
 `tel` varchar(50) NOT NULL, 
 `email` varchar(64) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

SSH+Jquery+Ajax-Framework-Integration

Die Ähnlichkeiten und Unterschiede zwischen Ajax und traditioneller Webentwicklung

Detaillierte Erläuterung der $.ajax()-Methodenparameter in Jquery

Das obige ist der detaillierte Inhalt vonjQuery sendet über Ajax eine Anfrage an den PHP-Server und gibt JSON-Daten zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!