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的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
js调用flash的效果代码
2008/04/26 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
2017/05/02 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
Python中type的构造函数参数含义说明
2015/06/21 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
简述数据库的设计过程
2015/06/22 面试题
饲料采购员岗位职责
2013/12/19 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
小学推普周活动总结
2015/05/07 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
JavaScript的Set数据结构详解
2022/02/18 Javascript
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
MySQL 语句执行顺序举例解析
2022/06/05 MySQL