jQuery envoie une requête au serveur PHP via Ajax et renvoie les données JSON

Cet article présente principalement jQuery pour envoyer des requêtes au serveur PHP via Ajax et renvoyer des données JSON. Les points de connaissances conçus incluent jquery, ajax, php et json. Les amis intéressés peuvent en apprendre davantage sur jquery ajax et renvoyer 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 très bon rôle dans le processus d'interaction front-end et back-end.

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. Les lecteurs qui lisent cet article doivent avoir des connaissances pertinentes sur jQuery, Ajax et PHP et être capables de les utiliser habilement.

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>

Dans l'exemple, une liste de noms d'utilisateur ul#userlist et une couche de détails utilisateur# sont affichées . Il convient de noter que j'ai défini l'attribut "rel" et attribué une valeur à chaque balise . 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; ; hauteur : 42 px ; taille de la police : 14 px ;
font-weight : bold}
#info{clear : left; padding : 1px solid 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 une belle apparence. un vous-même.

jQuery

Avant d'utiliser jQuery, n'oubliez pas de vous assurer que la bibliothèque jQuery est chargée.

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

L'étape suivante consiste à commencer à é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 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" du. balise actuelle, Et former une chaîne de données : var data = "action=getlink&id="+hol, puis envoyer 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 sont renvoyées. les données obtenues sont affichées au milieu des détails de l'utilisateur.

PHP

Après avoir reçu la requête Ajax frontale, le serveur backend.php se connecte à la base de données via les paramètres transmis et interroge la table utilisateur, convertissant le correspondant informations utilisateur dans un tableau $list, et enfin convertir 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 : Application de JSON en PHP. 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, la structure de la table mysql est jointe

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 est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Intégration du framework SSH+Jquery+Ajax

Les similitudes et les différences entre ajax et le développement Web traditionnel

Explication détaillée des paramètres de la méthode $.ajax() dans Jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!