jQuery renvoie les données JSON via Ajax_jquery

Le PHP côté serveur lit les données MYSQL, les convertit en données JSON, les transmet au Javascript frontal et exploite les données JSON. Cet article démontrera à travers des exemples comment jQuery envoie une requête au serveur PHP via Ajax et renvoie des données JSON.

JSON (JavaScript Object Notation) est un format léger d'échange de données. Facile à lire et à écrire pour les humains, et facile à analyser et à générer pour les machines. JSON joue un excellent rôle dans le processus d'interaction front-end et back-end. Veuillez continuer à lire le didacticiel ci-dessous.

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

Dans l'exemple, une liste de noms d'utilisateur ul#userlist et une couche de détails utilisateur #info sont affichées. Il convient de noter que j'ai défini l'attribut "rel" et attribué une valeur à chaque balise 3499910bf9dac5ae3c52d5ede7383485. Ceci est très important et sera utilisé dans jQuery. L'effet que je souhaite obtenir est le suivant : lorsque vous cliquez sur le nom d'un utilisateur dans la liste des utilisateurs, les informations détaillées de l'utilisateur, telles que le numéro de téléphone, l'EMAIL, etc., seront affichées immédiatement.

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 définit l'apparence d'affichage de la liste des utilisateurs et des détails de l'utilisateur. Vous pouvez également concevoir vous-même une belle apparence.

jQuery

Avant d'utiliser jQuery, n'oubliez pas de vous assurer que la bibliothèque jQuery est chargée en premier.
8e0af8f3b9d066fbd32048935823b1002cacc6d41bbb37262a98f745aa00fbf0 Ensuite, commençons à écrire du code jQuery.

$(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); 
    }); 
  }); 
}); 

Je lie un événement click à chaque balise 3499910bf9dac5ae3c52d5ede7383485 de la liste des utilisateurs Lorsque l'on clique sur le nom de l'utilisateur, les opérations suivantes sont effectuées : Récupérer la valeur de l'attribut "rel" de la balise actuelle et former une donnée. string : var data = "action=getlink&id=" hol, puis envoyez une requête JSON au serveur server.php via ajax Après avoir obtenu la réponse en arrière-plan, les données JSON sont renvoyées et les données obtenues sont affichées dans les détails de l'utilisateur. .

PHP

Après avoir reçu la requête Ajax du front-end, le backend server.php se connecte à la base de données via les paramètres transmis et interroge la table utilisateur, convertit les informations utilisateur correspondantes en un tableau $list, et enfin convertit le tableau en Données JSON. Pour plus d'informations sur le fonctionnement de PHP et JSON, vous pouvez consulter les articles collectés sur ce site :. Voici le code détaillé de server.php. La partie connexion de données est omise.

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); 
} 

Grâce à cet article, vous pouvez savoir que jQuery envoie des requêtes JSON au serveur via Ajax. La méthode $.getJSON est très pratique et simple. Et les données renvoyées par le serveur peuvent être analysées pour obtenir le contenu des champs correspondants, ce qui est plus simple et plus rapide à traiter qu'une grande chaîne de chaînes renvoyée par une requête HTML.

Enfin, attachez la structure de la table mysql

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; 

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.