jQuery는 Ajax_jquery를 통해 JSON 데이터를 반환합니다.

서버 측 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" 속성을 설정하고 각 3499910bf9dac5ae3c52d5ede7383485 태그에 값을 할당한다는 점은 주목할 가치가 있습니다. 이는 매우 중요하며 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 라이브러리가 먼저 로드되어 있는지 확인하는 것을 잊지 마세요.
8e0af8f3b9d066fbd32048935823b1002cacc6d41bbb37262a98f745aa00fbf0 다음으로 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); 
    }); 
  }); 
}); 

사용자 목록의 각 3499910bf9dac5ae3c52d5ede7383485 태그에 클릭 이벤트를 바인딩합니다. 사용자 이름을 클릭하면 다음 작업이 수행됩니다. 현재 태그의 "rel" 속성 값을 가져와 데이터를 형성합니다. string: var data = "action=getlink&id=" hol, 그런 다음 ajax를 통해 server.php 서버에 JSON 요청을 보냅니다. 백그라운드 응답을 받은 후 JSON 데이터가 반환되고, 얻은 데이터가 사용자 세부정보에 표시됩니다. .

PHP

프런트엔드에서 Ajax 요청을 받은 후 백엔드 server.php는 전달된 매개변수를 통해 데이터베이스에 연결하고 사용자 테이블을 쿼리하고 해당 사용자 정보를 $list 배열로 변환한 후 마지막으로 배열을 다음으로 변환합니다. JSON 데이터. PHP 및 JSON 작동에 대한 정보를 보려면 다음 사이트에 수집된 기사를 볼 수 있습니다. 다음은 server.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); 
} 

이 기사를 통해 jQuery가 Ajax를 통해 JSON 요청을 서버에 보내는 것을 알 수 있습니다. $.getJSON 메소드는 매우 편리하고 간단합니다. 그리고 서버에서 반환된 데이터를 구문 분석하여 해당 필드의 콘텐츠를 얻을 수 있는데, 이는 HTML 요청에서 반환된 큰 문자열보다 처리가 더 쉽고 빠릅니다.

마지막으로 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; 

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.