집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환합니다.

jQuery는 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환합니다.

亚连원래의: 2018-05-24 16:03:531620검색

이 글에서는 jQuery가 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환하는 방법을 주로 소개합니다. 설계된 지식 포인트에는 jquery, ajax, php 및 json이 포함됩니다. 관심 있는 친구는 json을 반환하는 jquery ajax에 대해 알아볼 수 있습니다. )은 경량 데이터 교환 형식입니다. 사람이 읽고 쓰기 쉽고, 기계가 구문 분석하고 생성하기도 쉽습니다. JSON은 프런트엔드와 백엔드 상호작용 과정에서 매우 좋은 역할을 합니다.

서버 측 PHP는 MYSQL 데이터를 읽어서 JSON 데이터로 변환한 후 프런트 엔드 Javascript에 전달하고 JSON 데이터를 작동시킵니다. 이 기사에서는 jQuery가 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환하는 방법을 예제를 통해 설명합니다. 이 기사를 읽는 독자는 jQuery, Ajax 및 PHP에 대한 관련 지식이 있어야 하며 이를 능숙하게 사용할 수 있어야 합니다.

XHTML

<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> 
<p 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> 
</p>

예제에서는 사용자 이름 목록 ul#userlist 및 사용자 세부정보 레이어 #info가 표시됩니다. "rel" 속성을 설정하고 각 3499910bf9dac5ae3c52d5ede7383485 태그에 값을 할당한다는 점은 주목할 가치가 있습니다. 이는 매우 중요하며 jQuery에서 사용됩니다. 내가 달성하고 싶은 효과는 사용자 목록에서 사용자 이름을 클릭하면 전화번호, 이메일 등과 같은 사용자의 세부 정보가 즉시 표시된다는 것입니다.

CSS

#userlist{margin:4px; height:42px}

#userlist li{float:left; line-height:42px; 글꼴 크기:14px; 무게:굵게 표시}

#info{clear:왼쪽; 패딩:6px; 테두리:1px 솔리드 #b6d6e6; 배경:#e8f5fe}
#info p{line-height:24px}
#info p 범위{font-weight:bold }

CSS는 사용자 목록과 사용자 세부 정보의 표시 모양을 설정하며 보기 좋은 모양을 직접 디자인할 수도 있습니다.

jQuery

jQuery를 사용하기 전에 jQuery 라이브러리가 먼저 로드되었는지 확인하는 것을 잊지 마세요.

<script type="text/javascript" src="../js/jquery.js"></script>

다음 단계는 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 작동에 대한 자세한 내용은 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;

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

jQuery는 Ajax를 통해 PHP 서버에 요청을 보내고 JSON 데이터를 반환합니다.

관련 기사