jQuery基于ajax操作json数据简单示例


Posted in Javascript onJanuary 05, 2017

本文实例讲述了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);
  }
}
?>
Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 #Javascript
如何提高Dom访问速度
Jan 05 #Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 #Javascript
基于jQuery实现选项卡效果
Jan 04 #Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Javascript Select操作大集合
2009/05/26 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
js基础之DOM中document对象的常用属性方法详解
2016/10/28 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
react-native android状态栏的实现
2018/06/15 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Vue 数据响应式相关总结
2021/01/28 Vue.js
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
python requests.post带head和body的实例
2019/01/02 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
简历自我评价怎么写好呢?
2014/01/04 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
大明湖导游词
2015/02/03 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python