jQuery基于ajax操作json数据简单示例
本文实例讲述了jquery基于ajax操作json数据的方法。分享给大家供大家参考，具体如下：
jquery ajax 实例演示
jquery ajax 的三种格式，在与后台进行数据交互的时候可以是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>jquery ajax 实例演示</title>
</head>
<script language="javascript" src="../lib/jquery.js"></script>
<script language="javascript">
$(document).ready(function ()
{
$('#send_ajax').click(function (){
var params=$('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) //回传函数
{
var myjson='';
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) //回传函数
{
var myjson='';
eval("myjson=" + data + ";");
$("#result").html(myjson.job);
}
);
});
});
function update_page (json) //回传函数实体，参数为xmlhttprequest.responsetext
{
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job+"<br />";
str+="追加测试:"+json.append;
$("#result").html(str);
}
</script>
<body>
<div id="result" style="background:orange;border:1px solid red;width:300px;height:200px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">post提交</button>
<button id="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;
function my_json_encode($phparr)
{
if(function_exists("json_encode"))
{
return json_encode($phparr);
}
else
{
require_once 'json/json.class.php';
$json = new services_json;
return $json->encode($phparr);
}
}
?>
ps：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：
在线json代码检验、检验、美化、格式化工具：
json在线格式化工具：
在线xml/json互相转换工具：
json代码在线格式化/美化/压缩/编辑/转换工具：
在线json压缩/转义工具：
c语言风格/html/css/json代码格式化美化工具：
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery中ajax用法总结》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery操作json数据技巧汇总》、《jquery扩展技巧总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。