Rumah > Artikel > hujung hadapan web > jQuery mengembalikan data JSON melalui Ajax_jquery
PHP sebelah pelayan membaca data MYSQL, menukarnya kepada data JSON, menghantarnya ke Javascript bahagian hadapan dan mengendalikan data JSON. Artikel ini akan menunjukkan melalui contoh bagaimana jQuery menghantar permintaan kepada pelayan PHP melalui Ajax dan mengembalikan data JSON.
JSON (JavaScript Object Notation) ialah format pertukaran data yang ringan. Mudah untuk manusia membaca dan menulis, dan mudah untuk mesin menghuraikan dan menjana. JSON memainkan peranan yang sangat baik dalam proses interaksi hadapan dan belakang. Sila teruskan membaca tutorial di bawah.
<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>
Dalam contoh, senarai nama pengguna ul#userlist dan lapisan butiran pengguna #info dipaparkan. Perlu diingat bahawa saya menetapkan atribut "rel" dan memberikan nilai kepada setiap teg 3499910bf9dac5ae3c52d5ede7383485 Kesan yang ingin saya capai ialah: apabila anda mengklik pada nama mana-mana pengguna dalam senarai pengguna, maklumat terperinci pengguna, seperti nombor telefon, EMAIL, dsb., akan dipaparkan serta-merta.
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 menetapkan rupa paparan senarai pengguna dan butiran pengguna Anda juga boleh mereka bentuk penampilan yang tampan sendiri.
jQuery
Sebelum menggunakan jQuery, jangan lupa pastikan perpustakaan jQuery dimuatkan dahulu.
8e0af8f3b9d066fbd32048935823b1002cacc6d41bbb37262a98f745aa00fbf0
Seterusnya, mari mula menulis kod 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); }); }); });
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); }
Akhir sekali, lampirkan struktur jadual 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;