function js_thai_encode($data)
{	// fix all thai elements
	if (is_array($data))
	{
		foreach($data as $a => $b)
		{
			if (is_array($data[$a]))
			{
				$data[$a] = js_thai_encode($data[$a]);
			}
			else
			{
				$data[$a] = iconv("tis-620","utf-8",$b);
			}
		}
	}
	else
	{
		$data =iconv("tis-620","utf-8",$data);
	}
	return $data;
}

ไปดู LIVE DEMO กันเลย

ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ

var data = {
    id: 4,
    name: "User List",
    table: [
        {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
        {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
        {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
        {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
        {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
    ],
    toString: function() {
        return this.name.bold() + ' (count: ' + this.table.length + ')';
    }
};

เสร็จแล้วก็มากำหนด Template

{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}

{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
    <td>{$T.name.bold()}</td>
    <td>{$T.age}</td>
    <td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}

ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ

$("#result").setTemplate($("textarea").text()).processTemplate(data);

ลองไปดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

แหล่งอ้างอิงและ API

• http://jtemplates.tpython.com/
• http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/

MIME ย่อมาจาก Multipurpose Internet Mail Extension ใช้สำหรับบ่งบอกชนิดของไฟล์สำหรับการรับส่งกันใน Internet เช่น ไฟล์ .txt ธรรมดา จะมี MIME type เป็น “text/plain” ส่วนไฟล์ html ก็จะเป็น “text/html” ส่วนภาพ gif ก็จะเป็น “image/gif” เป็นต้น

ทำไมเราต้องสนใจชนิดของไฟล์พวกนี้ด้วยล่ะ ด้วยเหตุผลที่ว่า สคริปที่เป็น server-sided script อย่างที่ผมอ้างถึงข้างต้น มันสามารถเปลี่ยนชนิดของไฟล์ที่ส่งกลับมาได้น่ะสิครับ เช่น หน้า php ที่ส่งเป็นภาพกลับมาแทนที่จะเป็น html ก็เพราะว่าเค้ามีการส่ง MIME Type ของภาพกลับมาใน header ด้วยครับ

อย่างที่ผมได้บอกตั้งแต่แรกแล้วว่าปกติแล้ว server-sided script โดยปกติแล้วจะส่ง type เป็น html กลับมาให้ แต่ตัว JSON เองนั้น อย่างที่รู้กันอยู่ว่ามันคือ JavaScript (สังเกตจากชื่อย่อก็ได้ครับ JavaScript Object Notation) จะมากำหนดให้เป็น html ก็กระไรอยู่ การใช้งาน JSON จึงควรกำหนด MIME Type ให้มันอย่างถูกต้องไปเลยครับ

เราสามารถกำหนด MIME Type ให้กับ JSON ได้ 2 ชนิด คือ “text/javascript” หรือ “application/json” ครับ ซึ่งแบบหลังจะเป็นที่นิยมมากกว่า

สำหรับคนที่เคยมีประสบการณ์กับ JSON บน jQuery นั้น ถ้าไม่เคยกำหนด MIME Type ให้กับ JSON โดยปล่อยให้มันเป็น “text/html” ธรรมดากลับมา คงจะเคยเจอเหตุการณ์ที่ jQuery สามารถดึงค่า JSON มาใช้ได้บ้างไม่ได้บ้างแหละครับ

และในเมื่อมันเป็นความไม่แน่นอนที่ไม่มีใครอยากให้เกิดขึ้่น เราก็แค่เพิ่ม code เข้าไปเพื่อให้มันกลายเป็น JSON จริง ๆ น่าจะง่ายกว่า

คำสั่งใน php ก็ง่ายแสนง่ายครับ แค่บรรทัดเดียวว่า…

header("content-type:application/json");

เท่านี้เองครับ สิ่งที่ return กลับไปให้บราวเซอร์ก็จะกลายเป็น JSON ในบัดดล ว่าแล้วก็ไปดู LIVE DEMO กันเลย

ล.ป. (ลืมไป) ตัวอย่างใน LIVE DEMO บางทีอาจจะได้ค่ากลับมาเป็น JSON เสมอก็ได้ อย่างที่บอกแหละครับ ว่ามันไม่แน่ไม่นอน

หมายเหตุ

server-sided script หมายถึง script ต่าง ๆ ที่มีการรันที่ server แล้วส่งกลับมาให้กับ client เช่น php, asp, jsp, perl เป็นต้น
client-sided script หมายถึง script ต่าง ๆ ที่มีการรันที่ตัว client เอง เช่น Javascript, VBScript เป็นต้น

ยกตัวอย่างค่าของ JSON ครับ

{
  "name": "chonla",
  "position": "คนสวน",
  "birthday": {
    "date": 1,
    "month": 1,
    "year": 1970
  }
}

การนำไปใช้งานก็แสนง่ายดายครับ มีหลายวิีธีให้เลือก เช่น ผมยกตัวอย่างให้ตัวแปร contact เก็บค่า string ด้านบน เมื่อผมต้องการทำให้มันเป็น JSON object ก็เพียงแค่สั่ง eval() มันครับ

var c1 = eval("(" + contact + ")"); // แบบนี้ก็ได้
eval("var c2 = " + contact + ";");  // แบบนี้ก็ยังได้เลยครับ

การเอา JSON ไปใช้กับ Ajax

เดิมที Ajax จะใช้กับ XML (ตามชื่อมันเลยครับ) หลัง ๆ ไม่ได้มีใช้แค่ XML แล้วครับ ยังมีทั้ง JSON, Text, HTML หรือ Data ในรูปแบบอื่น ๆ อีก การรับค่า XML นั้น ปกติเราก็จะดึงจาก responseXML ของ XML Object แต่ JSON มีค่าเป็น string ธรรมดา ก็ให้ดึงจาก responseText แทนครับ แล้วก็นำไป eval() เพื่อให้ได้เป็น Object ได้เลยครับ

การเอา JSON ไปใช้กับ jQuery

ยิ่งง่ายใหญ่ ใน $.post() ใน jQuery เวอร์ชั่นใหม่ ๆ ได้เพิ่ม parameter ตัวสุดท้ายมาให้เพื่อกำหนดชนิดของข้อมูลที่จะรับกลับมา เราก็แค่กำหนด “json” ให้มัน ค่าที่ได้ก็จะกลับมาเป็น Object สำเร็จรูปเลยครับ

$.post("save.php", {name:"john"}, save_complete, "json");
function save_complete(json)
{
    alert(json.code);
}

ง่ายใช่มั๊ยล่ะครับ งั้นไปดู LIVE DEMO กันครับ

แหล่งอ้างอิงเพิ่มเติม

• http://en.wikipedia.org/wiki/JSON
• http://www.json.org/