서버 측 PHP는 MYSQL 데이터를 읽어 JSON 데이터로 변환한 후 프런트엔드 Javascript에 전달하고 JSON 데이터를 연산합니다. 이 기사에서는 jQuery가 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환하는 방법을 예제를 통해 설명합니다.
JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. 사람이 읽고 쓰기 쉽고, 기계가 구문 분석하고 생성하기도 쉽습니다. JSON은 프런트엔드와 백엔드 상호작용 과정에서 탁월한 역할을 합니다. 아래 튜토리얼을 계속 읽어보세요.
<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>
이 예에서는 사용자 이름 목록 ul#userlist와 사용자 세부정보 레이어 #info가 표시됩니다. "rel" 속성을 설정하고 각 태그에 값을 할당한다는 점은 주목할 가치가 있습니다. 이는 매우 중요하며 jQuery에서 사용됩니다. 내가 달성하고 싶은 효과는 사용자 목록에서 사용자 이름을 클릭하면 전화번호, 이메일 등과 같은 사용자의 세부 정보가 즉시 표시된다는 것입니다.
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는 사용자 목록과 사용자 세부 정보의 표시 모양을 설정하며, 보기 좋은 모양을 직접 디자인할 수도 있습니다.
jQuery
jQuery를 사용하기 전에 jQuery 라이브러리가 먼저 로드되어 있는지 확인하는 것을 잊지 마세요.
다음으로 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); }
마지막으로 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;