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