jQuery基于ajax操作json数据简单示例
本文实例讲述了jQuery基于ajax操作json数据的方法。分享给大家供大家参考，具体如下：
jQueryAjax实例演示
jQueryAjax的三种格式，在与后台进行数据交互的时候可以是json格式也可以是xml格式，本人建议将数据转化成json格式。
Xml与json的比较
1、可读性
JSON和XML的可读性可谓不相上下，一边是建议的语法，一边是规范的标签形式，很难分出胜负。
2、可扩展性
XML天生有很好的扩展性，JSON当然也有，没有什么是XML能扩展，JSON不能的。
3、编码难度
XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有json.org提供的工具，但是JSON的编码明显比XML容易许多，即使不借助工具也能写出JSON的代码，可是要写好XML就不太容易了。
4、解码难度
XML的解析得考虑子节点父节点，让人头昏眼花，而JSON的解析难度几乎为0。这一点XML输的真是没话说。
<html>
<head>
<title>jQueryAjax实例演示</title>
</head>
<scriptlanguage="javascript"src="../lib/jquery.js"></script>
<scriptlanguage="javascript">
$(document).ready(function()
{
$('#send_ajax').click(function(){
varparams=$('input').serialize();//序列化表单的值
$.ajax({
url:'ajax_json.php',//后台处理程序
type:'post',//数据发送方式
dataType:'json',//接受数据格式
data:params,//要传递的数据
success:update_page//回传函数(这里是函数名)
});
});
//$.post()方式：
$('#test_post').click(function(){
$.post(
'ajax_json.php',
{
username:$('#input1').val(),
age:$('#input2').val(),
sex:$('#input3').val(),
job:$('#input4').val()
},
function(data)//回传函数
{
varmyjson='';
eval('myjson='+data+';');
$('#result').html("姓名:"+myjson.username+"<br/>工作:"+myjson['job']);
}
);
});
//$.get()方式：
$('#test_get').click(function()
'ajax_json.php',
{
username:$("#input1").val(),
age:$("#input2").val(),
sex:$("#input3").val(),
job:$("#input4").val()
},
function(data)//回传函数
{
varmyjson='';
eval("myjson="+data+";");
$("#result").html(myjson.job);
}
);
});
});
functionupdate_page(json)//回传函数实体，参数为XMLhttpRequest.responseText
{
varstr="姓名:"+json.username+"<br/>";
str+="年龄:"+json.age+"<br/>";
str+="性别:"+json.sex+"<br/>";
str+="工作:"+json.job+"<br/>";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>
<divid="result"style="background:orange;border:1pxsolidred;width:300px;height:200px;"></div>
<formid="formtest"action=""method="post">
<p><span>输入姓名:</span><inputtype="text"name="username"id="input1"/></p>
<p><span>输入年龄:</span><inputtype="text"name="age"id="input2"/></p>
<p><span>输入性别:</span><inputtype="text"name="sex"id="input3"/></p>
<p><span>输入工作:</span><inputtype="text"name="job"id="input4"/></p>
</form>
<buttonid="send_ajax">提交</button>
<buttonid="test_post">POST提交</button>
<buttonid="test_get">GET提交</button>
</body>
</html>
PHP文件ajax_json.php：
<?php
//$arr=$_POST;//若以$.get()方式发送数据，则要改成$_GET.或者干脆:$_REQUEST
$arr=$_REQUEST;
$arr['append']='测试字符串';
//print_r($arr);
$myjson=my_json_encode($arr);
echo$myjson;
functionmy_json_encode($phparr)
{
if(function_exists("json_encode"))
{
returnjson_encode($phparr);
}
else
{
require_once'json/json.class.php';
$json=newServices_JSON;
return$json->encode($phparr);
}
}
?>
PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：
在线
JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat
在线XML/