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

Saya mengikat acara klik pada setiap teg Apabila nama pengguna diklik, operasi berikut dilakukan: Dapatkan nilai atribut "rel" teg semasa dan bentuk data. string: var data = "action=getlink&id=" hol, dan kemudian hantar permintaan JSON ke pelayan server.php melalui ajax Selepas mendapat respons latar belakang, data JSON dikembalikan dan data yang diperoleh dipaparkan dalam butiran pengguna .

PHP

Selepas menerima permintaan Ajax dari bahagian hadapan, pelayan bahagian belakang.php menyambung ke pangkalan data melalui parameter yang diluluskan dan menanyakan jadual pengguna, menukar maklumat pengguna yang sepadan kepada senarai $list dan akhirnya menukar tatasusunan menjadi data JSON. Untuk maklumat tentang pengendalian PHP dan JSON, anda boleh melihat artikel yang dikumpul di tapak ini:. Berikut ialah kod terperinci pelayan.php Bahagian sambungan data ditiadakan.

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

Melalui artikel ini, anda boleh mengetahui bahawa jQuery menghantar permintaan JSON ke pelayan melalui Ajax Kaedah $.getJSON sangat mudah dan mudah. Dan data yang dikembalikan oleh pelayan boleh dihuraikan untuk mendapatkan kandungan medan yang sepadan, yang lebih mudah dan lebih cepat untuk diproses daripada rentetan rentetan besar yang dikembalikan oleh permintaan HTML.

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; 

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.