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 相关文章推荐
js和as的稳定传值问题解决
Jul 14 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 Javascript
js实现盒子移动动画效果
Aug 09 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代码
2007/03/03 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PDO::commit讲解
2019/01/27 PHP
textContent在Firefox下与innerText等效的属性
2007/05/12 Javascript
js 调整select 位置的函数
2008/02/21 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
django静态文件加载的方法
2018/05/20 Python
创建Django项目图文实例详解
2019/06/06 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
keras的三种模型实现与区别说明
2020/07/03 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
职业规划实施方案
2014/06/10 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Apache POI的基本使用详解
2021/11/07 Servers
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android