jQuery通過ajax返回json格式資料簡單介紹
在實際應用中,經常將從後臺獲取的資料轉換為json格式,然後交由前臺來處理。
下面就介紹一下如何通過jQuery的ajax介紹一下如何實現此功能。
下面將通過例項演示了jQuery通過Ajax向PHP服務端傳送請求並返回json資料。
JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。
易於人閱讀和編寫,同時也易於機器解析和生成。
JSON在前後臺互動的過程中發揮著相當出色的作用。
一.html程式碼如下:
[HTML] 純文字檢視 複製程式碼<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。
值得注意的是,給每個<a>標籤設定屬性“rel”並賦值,這個很重要,將在jQuery中使用。
要實現的效果就是:當點選使用者列表中任意使用者的姓名,將即時顯示出該使用者的詳細資訊,如電話、EMAIL等。
二.css程式碼如下:
[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庫,這個不要忘記:
[HTML] 純文字檢視 複製程式碼<script type="text/javascript" src="jquery.js"></script>
程式碼如下:
[JavaScript] 純文字檢視 複製程式碼$(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); }); }); });
給使用者列表的每個<a>標籤都繫結一個click事件,當單擊使用者姓名時,執行以下操作:獲取當前標籤的屬性“rel”的值,並組成一個資料串:var data = "action=getlink&id="+hol,接著通過ajax向服務端server.php傳送JSON請求,得到後臺響應後,返回JSON資料,並將得到的資料顯示在使用者詳細資訊中。
四.PHP程式碼如下:
後臺server.php得到前端的Ajax請求後,通過傳遞的引數連線資料庫並查詢使用者表,將相應的使用者資訊轉換成一個陣列$list,最後將陣列轉換成JSON資料。
[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表結構:
[HTML] 純文字檢視 複製程式碼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解析json格式字串簡單介紹jQueryJSON字串
- jquery獲取json資料簡單介紹jQueryJSON
- JSON格式或者規則簡單介紹JSON
- jquery簡單ajax示例_讀取json檔案資料jQueryJSON
- jQuery ajax的執行順序簡單介紹jQuery
- JSON簡單介紹JSON
- jQuery與後臺語言通過json格式傳遞資料jQueryJSON
- ajax與json通過程式碼的簡單應用JSON
- jQuery、ajax新增Json資料jQueryJSON
- ajax傳輸超大資料設定方式簡單介紹大資料
- jQuery AJAX 簡介jQuery
- jQuery - AJAX簡介jQuery
- JSON物件簡單介紹JSON物件
- JQuery Ajax通過Handler訪問外部XML資料jQueryXML
- jQuery遍歷讀取json格式資料簡單程式碼例項jQueryJSON
- jQuery Validate簡單介紹jQuery
- jQuery filter() 用法簡單介紹jQueryFilter
- 前臺怎樣獲取後臺ajax資料簡單介紹
- jQuery解析json格式資料生成級聯選單jQueryJSON
- ajax跨域請求簡單介紹跨域
- json字串與json物件簡單介紹JSON字串物件
- jquery ajax簡單使用jQuery
- JSON簡介和Ajax簡介--bea這兩篇文章介紹的不錯JSON
- jQuery阻止事件冒泡簡單介紹jQuery事件
- jQuery自定義事件簡單介紹jQuery事件
- jquery動畫佇列簡單介紹jQuery動畫佇列
- 簡單介紹一下 JSONJSON
- 是什麼JSON,簡單介紹JSON
- JSON的優點簡單介紹JSON
- java通過url呼叫遠端介面返回json資料JavaJSON
- ajax返回json格式資料總是有問題,原因是bom頭資訊JSON
- json資料介紹JSON
- struts2.1.8.1+jquery1.4.2返回json資料jQueryJSON
- 自定義jquery外掛簡單介紹jQuery
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- jQuery自定義外掛簡單介紹jQuery
- jQuery建構函式簡單介紹jQuery函式
- jQuery外掛製作簡單介紹jQuery