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 批量上传图片实现代码
Jan 28 Javascript
JavaScript Promise启示录
Aug 12 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
js实现关闭网页出现是否离开提示
Dec 07 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
移动节点的jquery代码
2014/01/13 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python入门之modf()方法的使用
2015/05/15 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
python如何写个俄罗斯方块
2020/11/06 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
婚前保证书
2014/04/29 职场文书
教师求职自荐书
2014/06/14 职场文书
小王子读书笔记
2015/06/29 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
python3操作redis实现List列表实例
2021/08/04 Python
Oracle数据库中通用的函数实例详解
2022/03/25 Oracle