在這邊, 介紹用jQuery(一個非常火紅JavaScript的library), 搭配JSON, 來做到這一件事情.
整各的機制運作, 可以分為下面幾各步驟,
1. client用HTTP Get method像server request data.
2. server將response data轉成JSON format傳回給client.
3. client parse JSON data, 轉成form element value, 並且顯示在browser上面.
在這邊, 我們會用幾各tool, 來幫助我們.
jQuery : 一各現在很紅, 非常優秀的JavaScript Library. 他希望能幫助Web開發時, 能夠write less, do more.
jQuery Form Deserialization plugin : 一各jQuery library, 可以幫助我們將JSON的array or hash轉成form element的value.
JSON : 全名是JavaScript Object Notation, 他是一各輕量化的data-interchange的格式,
他除了可以很容易讓人們讀寫外,也可以很容易讓language parse and generate. 最重要的是JavaScript的標準, 所以可以很自然的用在JavaScipt的應用中.
在jQuery中, 我們只需要用到兩各method就可以很輕易的做到這一件事情了.
$.getJSON(url, params, callback) --> Load JSON data from HTTP GET request.
在getJSON callback function中用, deserialization plugin所提供的method,
$(form id).deserialize(json data), 就完成了.
下面是一各簡單的HTML example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="deserialize.js"></script>
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
// AJAX get the data form server
$.getJSON("goform/formGet", function(json) {
/*
$.each(json, function(n, v) {
alert(n +'=' +v);
});
*/
$('#myForm').deserialize(json);
});
};
//]]>
</script>
</head>
<form id="myForm" action="goform/formPost" method="post">
Name: <input type="text" name="name" />
Comment: <input type="text" name="address">
<input type="submit" value="Submit" />
</form>
</html>
另外, goform/formGet, 這一各HTTP GET 所得到的資料為.
HTTP/1.0 200 OK
Server: GoAhead-Webs
Pragma: no-cache
Cache-control: no-cache
Expires: 0
Content-Type: application/json
{name: "Jimmy", address: "Taipei, Taiwan"}
沒有留言:
張貼留言