 |
|
|
 |
 |
|
คลิก
|
 |
 |
 |
 |
Date :
2010-07-25 11:07:56 |
By :
DownsTream |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
json ใช้กับ complex data แบบ tree ได้ง่ายๆ ครับ
ถ้าเป็น , string อย่างมากก็ได้ string array ชั้นเดียวและยังใช้ตัวอักษร , ไม่ได้ด้วย
|
 |
 |
 |
 |
Date :
2010-07-25 16:25:46 |
By :
2123 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุณครับ แบบว่า มีตัวการใช้ json กับ jquery ที่เป็น code สั้นๆ มาให้ดู เพื่อทำความเข้าใจได้ไหมครับ ถ้า ฝั่ง jquery ส่วนใหนคือ json และ ฝั่ง php ถ้าส่งกลับมาเป็น json จะได้ไหม
|
 |
 |
 |
 |
Date :
2010-07-26 09:48:28 |
By :
เหน่ง |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
นี่คับ อาจไม่เหมาะสำหรับเป็นตัวอย่าง แต่มันก็คือ js object ธรรมมา คล้าย hash
ตย. คือการเพิ่มค่าไปบันทึกเรคคอร์ด แล้วคืนค่ามาให้เลือกใน <select> (เพิ่ม list option)
JS
// Save new work type
$('#save-type').click(function(){
var uri = '<?php echo URL::site('manage/works/savetype');?>';
var new_type = $.trim($('#new-type').val());
if ( ! new_type)
{
$('#new-type').focus();
alert('โปรดระบุ ชื่อชนิดงานใหม่');
return;
}
var data = { type_name: new_type }
$('#saving1').html('(Loading..)');
// Hide new type <tr>
$('#tr-new-type').addClass('hide');
var success = false;
$.getJSON(uri, data, function(json, text_status){
var work_type = $('#work-type');
success = true;
work_type.html('');
for (var i=0; i < json.length; i++)
{
$('<option>').val(json[i]['value']).text(json[i]['text'])
.appendTo(work_type);
}
// Select new added
$('option[value='+json[i-1]['value']+']').attr('selected', 'selected');
// Focus on work name
$('#work-name').focus();
});
if ( ! success)
{
alert('มีปัญหาขณะโหลด โปรดลองใหม่');
}
$('#saving1').html('');
});
// ส่วนส่ง คืน json
Code (PHP)
// Save new type and response all type as JSON
public function action_savetype()
{
if ($_GET['type_name'])
{
$model = new Model_Manage_Works;
$rs = $model->savetype($_GET['type_name']);
$types = array();
foreach ($rs as $rec)
{
array_push($types, array('value' => $rec['types_id'], 'text' => $rec['types_name']));
}
$this->request->response = json_encode($types);
$this->auto_render = FALSE;
}
}
http://gunner.freetzi.com
|
 |
 |
 |
 |
Date :
2010-07-26 10:42:10 |
By :
pjgunner |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
การใช้งาน getJSON ของ jquery
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
// กำหนดให้ประมวลผล jquery ในส่วนนี้ตอนโหลด
$(function() {
// เช็ค event ของ element ปุ่มที่มี id="btn-send"
$('#btn-send').click(function() {
// ใช้ jquery getJSON เพื่อให้ข้อมูลที่ response กลับมาอยู่ในรูปแบบของ json
$.getJSON('json_action.php', { name: $('#name').val(), sname: $('#sname').val() },
// ฟังชัน call back
function(json){
// ใช้ console ของ firebug เช็ค response ของ json
/** ต้องรันบน firefox หรือ google chrome เท่านั้นจึงจะทำงาน คำสั่ง console ได้ */
console.debug(json);
// วน loop โดยใช้ each ของ jqeury เพื่อแสดง ข้อมูลที่ json reponse มา
$.each(json, function(index, value) {
console.debug(value);
});
});
});
});
</script>
</head>
<body>
<input type="text" name="name" id="name" /><br />
<input type="text" name="sname" id="sname" /><br />
<input type="button" name="btn-send" id="btn-send" value="submit" />
<div id="div-result"></div>
</body>
</html>
json_action.php
<?php
$array['name'] = $_GET['name'] ? $_GET['name'] : '';
$array['sname'] = $_GET['sname'] ? $_GET['sname'] : '';
// ใช้ json_encode เพื่อแปลงข้อมูลในรูปแบบของ array เป็นรูปแบบของ json
echo json_encode($array);
?>
|
 |
 |
 |
 |
Date :
2010-07-26 10:55:41 |
By :
DownsTream |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
ขอบคุณครับ...
|
 |
 |
 |
 |
Date :
2010-07-26 22:00:24 |
By :
เหน่ง |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|