jQuery gibt JSON-Daten über Ajax_jquery zurück

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, wie jQuery über Ajax eine Anfrage an den PHP-Server sendet und JSON-Daten zurückgibt.

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. Bitte lesen Sie das Tutorial weiter unten.

<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> 
<div 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> 
</div> 

Im Beispiel werden eine Benutzernamenliste ul#userlist und eine Benutzerdetailebene #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:80px; line-height:42px; height:42px; font-size:14px; 
font-weight:bold} 
#info{clear:left; padding:6px; border:1px solid #b6d6e6; background:#e8f5fe} 
#info p{line-height:24px} 
#info p span{font-weight:bold} 

CSS legt das Erscheinungsbild der Benutzerliste und Benutzerdetails fest. Sie können auch selbst ein ansprechendes Erscheinungsbild entwerfen.

jQuery

Bevor Sie jQuery verwenden, vergessen Sie nicht, sicherzustellen, dass zuerst die jQuery-Bibliothek geladen wird.
8e0af8f3b9d066fbd32048935823b1002cacc6d41bbb37262a98f745aa00fbf0 Beginnen wir als Nächstes mit dem Schreiben von jQuery-Code.

$(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. Wenn auf den Namen des Benutzers geklickt wird, werden die folgenden Vorgänge ausgeführt: Den Wert des Attributs „rel“ des aktuellen Tags abrufen und Daten erstellen string: 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 in den Benutzerdetails angezeigt .

PHP

Nach dem Empfang der Ajax-Anfrage vom Front-End stellt der Backend-Server.php über die übergebenen Parameter eine Verbindung zur Datenbank her und fragt die Benutzertabelle ab, konvertiert die entsprechenden Benutzerinformationen in ein Array $list und konvertiert schließlich das Array in JSON-Daten. Informationen zum Betrieb von PHP und JSON finden Sie in den auf dieser Website gesammelten Artikeln: 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.

Hängen Sie abschließend die MySQL-Tabellenstruktur
an

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 ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.