jQuery基于ajax对json操作的实例

  • 时间:
  • 2231人关注

这篇文章主要介绍了jQuery基于ajax操作json数据的方法,结合简单实例形式分析了jQuery的ajax基本使用方法及json数据传输操作相关技巧,需要的朋友可以参考下,另外这篇文章主要知识点是关于jQuery、ajax、json、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:
  • 编辑整理:辛婉奕
  • 教程字数:2363字节
  • 阅读时间:大概14分钟
  • 下载本教程(DOC版)
  • 《从0到1:jQuery快速上手》课件,源码,习题答案
  • JSON-handle
  • JSON Formatter
  • JSON Viewer
  • 征服Ajax:Web.2.0快速入门与项目实践(Java)
  • 本文实例讲述了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" ></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);
      }
    }
    ?>
    

    希望本文所述对大家jQuery程序设计有所帮助。


    上一篇:jQuery WebUploader文件上传实例浅析

    下一篇:jquery实现弹幕效果示例代码

    相关内容

    • python3 实现的对象与json相互转换的方法及代码

      这篇文章主要介绍了python3 实现的对象与json相互转换操作,结合实例形式分析了Python3使用json模块针对json格式数据转换操作的相关实现技巧,需要的朋友可以参考下

      02-16python3 实现的对象与json相互转换操作示例

      阅读更多
    • Django接收post前端返回的json格式数据的方法

      这篇文章主要介绍了Django接收post前端返回的json格式数据代码实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

      05-25Django接收post前端返回的json格式数据代码实现

      阅读更多
    • 如何解决jquery的flexigrid无法显示数据提示获取到数据问题

      升级了IE10,发现flexigrid无法显示数据,提示获取到了数据,但没任何报错任何显示,经过试验和跟踪,修改如下,有类似问题的朋友可以参考下哈

      04-19jquery的flexigrid无法显示数据提示获取到数据

      阅读更多
    • Jquery瀑布流插件的技巧用法

      瀑布流布局在目前貌似很火爆,具体的分析、原理、用到的知识等等可以看看以下几位牛人写的东西

      01-23Jquery瀑布流插件使用介绍

      阅读更多
    • 实例分享提取jquery的ready()方法

      有一些功能需求,需要在DOM载入时马上执行一些函数,但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了

      02-26提取jquery的ready()方法单独使用示例

      阅读更多
    • jQuery api 3.3.1中文手册

      jQuery api 3.3.1中文手册

      jQuery3.3.1中文手册 是一套jQuery API 3.3.1速查表,很实用的手册,在编写jQuery查看很实用,其内包含了jquery学习过程中的各类知识点,能够让你清楚地了解每一个函数的核心内容,属性以及css框架信息,从而更好的实现编程。需要的朋友可下载试试! 使用说明 这是目前最新版的jQuery api中文文档3.3.1版本。先解压压缩包。在打开软件。如果出现空白情况。请确保IE版本在9.0以上,或者是鼠标右击文件,选择ldquo;属性rdquo;,点击ldquo;取消限制rdquo;即

      大小:1.58 MBjQuery

      点击下载
    • jQuery实战

      jQuery实战

      jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

      大小:99.0 MBjQuery

      点击下载
    • JavaScript和jQuery实战手册

      JavaScript和jQuery实战手册

      JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

      大小:103 MBJavaScript

      点击下载
    • jQuery Mobile从入门到精通

      jQuery Mobile从入门到精通

      《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

      大小:168.7 MBjQuery

      点击下载
    • 疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

      疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战

      大小:131.7 MB前端开发

      点击下载
    • jQuery EasyUI开发指南

      jQuery EasyUI开发指南

      使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

      大小:48.4 MBjQuery

      点击下载
    • Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践

      本书是著名前端开发大牛阮晓龙老师爽作,HTML5、CSS3、jQuery、AJAX一站搞定,一本真正好学、实用又精彩的书,讲述了用HTML5 CSS3设计构建网站的必备知识,欢迎下载

      大小:167.1 MB前端开发

      点击下载
    • jQuery实战案例精粹

      jQuery实战案例精粹

      jQuery实战案例精粹 从Web开发的实际应用角度出发,结合当下热门的 jQuery插件技术,深入浅出地介绍了 jQuery高性能开发的技巧,是前端开发、设计人员的绝佳选择。 本书共 22章,介绍了 jQuer

      大小:272 MBjQuery

      点击下载
    • 锋利的jQuery

      锋利的jQuery

      《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

      大小:194.9 MBjQuery

      点击下载
    • jQuery UI开发指南

      jQuery UI开发指南

      《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

      大小:6.02 MB前端开发

      点击下载

    学习笔记

    24小时49分钟前回答

    jQuery Ajax File Upload使用实例解析

    本文实例为大家分享了jQuery Ajax File Upload实例源码,供大家参考,具体内容如下 项目结构 Default.aspx Upload.aspx Scripts/ style.css 效果图 客户端html代码 %@ Page Language=vb AutoEventWireup=false CodeBehind=UploadFile.aspx.vb Inherits=Web.UploadFile % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head runat=server title/title link rel=Stylesheet type=text/css href=style.css mce_href=style.css media=all / mce:script type=text/JavaScript src=../Scripts/jQuery-1.4.1.min.js mce_src=Scripts/jquery-1.4.1.min.js/mce:script mce:script type=text/javascript src=../Scripts/ajaxupload.3.5.js mce_src=Scripts/ajaxupload.3.5.js/mce:script mce:script type=text……

    20小时3分钟前回答

    jQuery Ajax 全局调用封装代码

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! 【嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人】 jQuery Ajax通用js封装 第一步:引入jQuery库 script type=text/javascript src=/js/jquery.min.js/script 第二步:开发Ajax封装类, 已测试通过,可以直接调用,直接贴代码,讲解就省了 /*****************************************************************jQuery Ajax封装通用类 (linjq) *****************************************************************/$(func……

    28小时17分钟前回答

    jquery Ajax解析XML数据代码实例

    $.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。 type: POST, // 默认:GET 请求方式:[POST/GET] dataType: xml, //默认[xml/html] 返回数据类型:[xml / html / script / json / jsonp] url: Test.ashx, // 默认当前地址,发送请求的地址 data: { key: value }, // 发送到服务器的数据 error: function(xml) { alert(Error loading XML document + xml); }, // 请求失败时调用 timeout: 1000, // 设置请求超时时间 success: function(xml) { // 请求成功后回调函数 参数:服务器返回数据,数据格式. $(#users).empty(); // 用Jquery处理xml数据 $(xml).find(Table).each(function() { var loginname = $(this).find(Loginname).text(); var Name).text(); $(#users).append……

    3小时38分钟前回答

    jQuery使用ajaxSubmit()提交表单方法步骤

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示: script src=http://code.jquery.com/jquery-1.11.0.min.js/script script src=http://malsup.github.io/jquery.form.js/script 那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form: XHTML form 标题:input type=text name=title /br / 内容:textarea name=contenttextarea/br / button提交/button /form 上面是一个需要提交内容的form,通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。使用方法如下所示: $(but……

    6小时23分钟前回答

    jQuery Ajax数据加载知识点总结

    加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段,并插入到指定位置,假设当前页面为: div/divbuttonload/button 同目录下的 test.html 文件内容为: spantest/span 我们可以使用 load 方法来加载 HTML,将其绑定到按钮的点击事件上: $(button).click(function() { $(div).load(test.html); }); 点击按钮后: 加载 JSON JSON 即 Javascript Object Notation,直译过来即 Javascript 对象表示法,因此它能很方便地表示和传输数据,它规定键和值都必须包含在双引号内,且函数为非法 JSON 值。 { name: stephenlee, sex: male} 将上述 JSON 数据保存在 test.json 文件内。我们可以使用 getJSON 方法加载 JSON 数据,同样将其绑定在按钮的点击事件上: $(button).c……

    36小时27分钟前回答

    如何使用jQuery+ajax实现鼠标单击修改内容

    现有表格中的一行的代码如下所示: tr tdspan class=catid2/span/td td公司介绍/td td内部栏目/td tdspan class=listorder title=点击修改2/span/td/tr 要实现鼠标单击修改内容思路如下: 1、点击栏目排序栏目中的数字,获取同一行的第一列中的内容,即栏目id 2、隐藏栏目排序中的数字 3、在栏目排序列中插入input框,并在input框中显示栏目排序中的内容,并设置为焦点 4、修改input中的内容,失去焦点的时候提交数据,用ajax向服务器传递数据 方法为post方法 5、提交数据的时候,友好提示修改中。。。 或者等待图片 6、返回成功信息 ,重新显示修改后的内容 去掉input框 实现这一功能的jquery核心代码如下: $(.listorder).click(f……