วันศุกร์ที่ 5 พฤศจิกายน พ.ศ. 2553

send json data with jquery

Download Sourcecode


<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST'){
$json = json_decode($_GET['json_data']);
$json2 = json_decode($_GET['json_data2']);
var_dump($json);
echo '<hr/>';
var_dump($json2);
echo '<hr/>';
foreach($json as $item)
echo $item.' ';
echo '<hr/>';
foreach($json2 as $row)
echo $row->name.' '.$row->tel.'<br/>';
exit;
}
?>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>send json data with jquery json plugin</title>
<script type="text/javascript" src="jquery.js"></script>
<!-- jquery plugin : http://code.google.com/p/jquery-json/ -->
<script type="text/javascript" src="jquery.json-2.2.js"></script>
<script type="text/javascript">
$(function(){

$('#submit-btn').click(function(e){
e.preventDefault();
var mydata = ['abc','defg','xyz'];
var mydata2 = [{name:'num',tel:'001'},{name:'nobita',tel:'002'},{name:'doraemon',tel:'003'}];
var json = $.toJSON(mydata);
var json2 = $.toJSON(mydata2);
$.ajax({
url:'?'+$.param({json_data:json, json_data2:json2}),
type:'POST',
dataType:'html',
success:function(e){
alert(e);
$('#result').html(e);
}
});
});
});

</script>

</head>
<body>


<button id="submit-btn">send data</button><br/>
Result: <div id="result"></div>

</body>
</html>


jquery plugin
http://code.google.com/p/jquery-json/

ไม่มีความคิดเห็น:

แสดงความคิดเห็น