jQuery基于ajax对json操作的实例

  • 更新时间:2020-05-21 15:54:08
  • 编辑:宦阳舒
给大家整理了相关的编程文章,网友许修为根据主题投稿了本篇教程内容,涉及到jQuery、ajax、json、jQuery基于ajax操作json数据简单示例相关内容,已被642网友关注,涉猎到的知识点内容可以在下方电子书获得。
  • JSON-handle / 192 KB 推荐度:
  • Bootstrap与jQuery UI框架设计 / 180 MB 推荐度:
  • jQuery实战(第2版) / 29.9 MB 推荐度:
  • jQuery Mobile从入门到精通 / 168.7 MB 推荐度:
  • 锋利的jQuery / 194.9 MB 推荐度:
  • jQuery基于ajax操作json数据简单示例

    本文实例讲述了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 Ajax File Upload使用实例解析

      这篇文章主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      发布时间:2020-01-19

    • jQuery Ajax 全局调用封装代码

      这篇文章主要介绍了jQuery Ajax 全局调用封装实例代码详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下

      发布时间:2020-04-26

    • jquery Ajax解析XML数据代码实例

      本篇文章主要是对Jquery Ajax解析XML数据(同步及异步调用)的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

      发布时间:2020-01-01

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

      这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下

      发布时间:2020-01-23

    • jQuery Ajax数据加载知识点总结

      Ajax 通俗来讲即不需要刷新页面即可从服务器或客户端上加载数据,当然这些数据的格式是多种多样的。

      发布时间:2020-02-10

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

      这篇文章主要介绍了jQuery+ajax实现鼠标单击修改内容的方法,需要的朋友可以参考下

      发布时间:2020-03-01

    用户留言