jQuery 는 Ajax 를 통 해 PHP 서버 에 요청 을 보 내 고 JSON 데 이 터 를 되 돌려 줍 니 다.

4136 단어 jqueryajaxjsonphp
JSON(JavaScript Object Notation)은 경량급 데이터 교환 형식 이다.사람 이 읽 고 쓰기 쉬 우 며 기계 적 으로 해석 하고 생 성 하기 도 쉽다.JSON 은 앞 뒤에서 상호작용 하 는 과정 에서 상당히 뛰어난 역할 을 하고 있다.
서버 PHP 는 MYSQL 데 이 터 를 읽 고 JSON 데이터 로 변환 하여 프론트 자바 script 에 전달 하고 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> 
<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>
실례 에서 사용자 이름 목록 l\#userlist,사용자 상세 정보 층\#info 를 보 여 줍 니 다.주의해 야 할 것 은,나 는 모든탭 에 속성"rel"을 설정 하고 값 을 부여 합 니 다.이것 은 매우 중요 합 니 다.jQuery 에서 사용 할 것 입 니 다.제 가 실현 하고 자 하 는 효 과 는 사용자 목록 에 있 는 임의의 사용자 의 이름 을 클릭 하면 전화,EMAIL 등 사용자 의 상세 한 정 보 를 즉시 표시 하 는 것 입 니 다.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 는 사용자 목록 과 사용자 의 상세 한 정 보 를 표시 하 는 외관 을 설정 하고 예 쁜 외관 을 디자인 할 수 있 습 니 다.jQueryjQuery 를 사용 하기 전에 불 러 온 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); }); }); }); 사용자 목록 의 모든탭 에 click 이 벤트 를 연결 합 니 다.사용자 이름 을 누 르 면 다음 작업 을 수행 합 니 다.현재 탭 의 속성"rel"값 을 가 져 오고 데이터 문자열 을 구성 합 니 다.var data="action=getlink&id="+hol.이 어 ajax 를 통 해 서버 server.phop 에 JSON 요청 을 보 내 백 엔 드 응답 을 받 은 후 JSON 데 이 터 를 되 돌려 줍 니 다.받 은 데 이 터 를 사용자 의 상세 한 정보 에 표시 합 니 다.PHP백 엔 드 server.php 는 전단 의 Ajax 요청 을 받 은 후 전 달 된 매개 변 수 를 통 해 데이터 베 이 스 를 연결 하고 사용자 표를 조회 하여 해당 사용자 정 보 를 하나의 배열$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 에서 되 돌아 오 라 고 요청 한 문자열 처럼 처리 하 는 것 이 편리 하고 빠 릅 니 다.마지막 으로 my sql 표 구 조 를 첨부 합 니 다. 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 json 에 관 한 지식 을 더 알 고 싶 으 시 면 저희www.jb51.net사이트 에 접속 하여 상세 한 정 보 를 알 아 보 세 요.
ajax 와 전통 웹 개발 의 공통점
안 드 로 이 드 애플 IOS 6 스위치 버튼 모방

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage