Jquery调用JSON数据

最新推荐文章于 2023-10-11 14:00:18 发布
最新推荐文章于 2023-10-11 14:00:18 发布
阅读量798 收藏 1
点赞数
分类专栏： B/S
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010927105/article/details/44243633
版权

         JSON是一种源自JavaScript的轻量级数据交换语言，用于将JavaScript中的对象转换成一种轻量型的、易解析的字符串，并且是这种字符串既能在JavaScript中传递，又能在Web应用程序中进行异步数据交互。

        JSON结构包含两种：name/value形式和数组形式。JSON主要通过这两种形式保存数据。通过Jquery框架能够实现对JSON读取、遍历、操作。

        Jquery读取JSON数据

<DOCTYPE html>
<html>
<head>
    <title>jquery 读取JSON数据 </title>
    <script src="JScript/jquery-yemian1.js"
            type="text/javascript"></script>
    <style type="text/css">
           body{font-size:13px}
           .iframe{width:260px;border:solid 1px;#666}
           .iframe.title{padding:5px;background-color:#eee}
           .iframe.content{padding:8px;font-soze:12px}
           .btn {border:#666 1px solid; padding:2px;width:8px
           filter; proid:DXImageTransform.Mcrosoft
           .Gradient(GridentType=0,StartColorStr=#ffffff'
           EndColorStr=#ECE9D8);}
     </style>
     <script type="text/javascript">
        var objInfo={
             'name':'甲'
             'sex':'男'
         };
         $(function(){
           $("#Button1").click(function(){
               var strHTML = "";
               strHTML +="姓名:" + objInfo.name + "<br>";
               strHTML +="性别:" + objInfo.sex + "<br>";
               $("#Tip").html(strHTML);
           });;
         });
      </script>
</head>
<body>
    <div class="iframe">
         <div class="title">
            <input id ="Button1" type="button"
                    class="btn" value="获取数据"/>
         </div>
         <div class="content">
             <div id="Tip"></div>
         </div>
</body>
</html>

Jquery遍历JSON数据 

<DOCTYPE html>
<html>
<head>
    <title>jquery 遍历JSON数据 </title>
    <script src="JScript/jquery-yemian1.js"
            type="text/javascript"></script>
    <style type="text/css">
           body{font-size:13px}
           .iframe{width:260px;border:solid 1px;#666}
           .iframe.title{padding:5px;background-color:#eee}
           .iframe.content{padding:8px;font-soze:12px}
           .btn {border:#666 1px solid; padding:2px;width:8px
           filter; proid:DXImageTransform.Mcrosoft
           .Gradient(GridentType=0,StartColorStr=#ffffff'
           EndColorStr=#ECE9D8);}
 </style>
     <script type="text/javascript">
        var objData={
            member:[{
              sex:"男"
              Person:{
                  name:["甲","乙","丙"]
              }
         },sex:"女"
              Person:{
                  name:["甲","乙","丙"]
              }
         }；
        function add_Grade(){
           var objmember = objData.member;
           var strHTML_0="";
           $.each(objmember,function(index){
             strHTML_0+='<a href="javascript:"
             οnclick="lnk_Click(' +index ')">'
             + objmember[index].grade + '</a>  ';
            });
          $(".title").html(":"+strHTML_0); 
         };
       function lnk_Click(i) {
         var objperson =objData.member[i].students.name;
         var strHTML_1="";
         $.each(objperson,function(index){
            strHTML_1 += 'nbsp; '+ objperson[index]+' ';
         });
         $("#Tip").html(strHTML_1);
       };
         $(function（）{
           add——Grade();
           lnk_Click(0)
         });
    </script>
</head>
<body>
   <div class="iframe">
        <div class="title"></div>
        <div class="content">
             <div id="Tip"></div>
        </div>
   </div>
</body> 
</html>

Jquery操作JSON数据 

<DOCTYPE html>
<html>
<head>
    <title>jquery 操作JSON数据 </title>
    <script src="JScript/jquery-yemian1.js"
            type="text/javascript"></script>
    <style type="text/css">
           body{font-size:13px}
           .iframe{width:260px;border:solid 1px;#666}
           .iframe.title{padding:5px;background-color:#eee}
           .iframe.content{padding:8px;font-soze:12px}
           .btn {border:#666 1px solid; padding:2px;width:8px
           filter; proid:DXImageTransform.Mcrosoft
           .Gradient(GridentType=0,StartColorStr=#ffffff'
           EndColorStr=#ECE9D8);}
     </style>
     <script type="text/javascript"> 
        var strInfo = "{'name': '甲 ','sex': ' nan '}"
        $(function(){
          var strV0="初始数据";
          var strV1="现在数据";
          $("#Button1").click(function() {
              var strHTML="";
              var objInfo = eval('(' + strInfo + ')');
              if ($(this).val() == strV1) {
                 objInfo.date = new Date().getTime();
              }
           strHTML += " 姓名: " + objInfo.name + "</br>";
           if ($(this).val() == strV0 ) {
               $(this).val(strV1);
           } else {
               $(this).val(strV0);
           }
           $("#Tip").html(strHtml);
         });
     </script>
</head>
<body>
    <div class="title">
       <input id="Button1" type="button"
             class="btn" value="初始数据" />
    </div>
    <div class="content">
        <div id ="Tip"></div>
    </div>
</body>
</html>
        JSON和XML在用于数据交互时有相似之处，Jquery对JSON的调用与  Jquery调用XML数据和方法也有一定的相似之处，善加使用Jquery对于JSON和XML的读取和便利操作能够为项目开发带来一定便利。


已三更，起来独自绕阶行
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 41
    评论
专栏目录
Jquery 调用json 数据
08-22 349
demo .html   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquery获取json数据演示页面
jquery 解析处理 json数据
凹凸的专栏
05-22 1508
在jQuery中我们可以使用jQuery.getJSON()方法很方便的异步从后台获取json格式的数据。（当然也可以使用jQuery.get(),jQuery.post(),jQuery.ajax()方法返回json格式数据，）       下面引用的是官方API对$.getJSON()的说明： jQuery.getJSON( url, [data,] [success(data, te
jquery中ajax调用json数据的使用说明
04-15 2692
这里将随机显示一条json数据到目前为止我们总结了jQuery.ajax的五种简写方法，接下来让我们集中精神，看看jQuery.ajax()方法，在使用中，笔者也是经常使用的jQuery.ajax()，因为大多数情况，我们需要对ajax请求出错的情况进行捕捉并处理。jQuery Ajax在web应用开发中很常用，它主要包括有ajax，get，post，load，getscript等等这几种常用无刷新操作方法，处理复杂的ajax请求时，jQuery使用jQuery.ajax()方法进行处理。
JQuery中获取JSON文件中的数据
热门推荐
Asurplus
02-25 21万+
1、使用 Ajax 方式获取 $.get("json/test.json", function(data) { console.log(data.total); }); 另一种方式： $.ajax({ type: "get", url: "json/test.json", dataType: "json", async: false, s...
JQuery前端之操作JSON的方法
最新发布
xinyuerr的博客
10-11 1915
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
jquery怎么操作json
tt745的博客
03-09 344
jquery操作json的方法：1、使用【jquery中的$.parseJSON()】方法；2、使用js中eval来强转；3、使用浏览器自带的【JSON.parse()】方法。 本教程操作环境：windows7系统、jquery3.2.1版本，该方法适用于所有品牌电脑。 推荐：jquery视频教程 jquery操作json的方法： 第一种方法：使用jquery中的$.parseJSON(),但是它对json数据格式的要求较高，必须要双引号包围起来 1 2 3 4 5 6 7 8 9 10 11 12 13
jQuery调取jSon数据并展示的方法
10-24
主要介绍了jQuery调取jSon数据并展示的方法,实例分析了jQuery调用json数据及展示的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery读取json数据
08-17
关于"jQuery读取json数据"这个主题，我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据，以及这样做带来的优势。 JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于...
使用JQuery实现从JSON对象转换为form提交数据
03-31
本篇文章将深入探讨如何利用jQuery从JSON对象转换为form提交数据。 首先，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它基于JavaScript的一个子集，易于人阅读和编写，同时也易于机器解析和...
jQuery调用json文件
liqiyu2014的博客
03-22 1237
jQuery调用json
Jquery如何发送Ajax请求
qq_45991659的博客
10-07 2061
1、首先可以使用$.get()方法，这是发送一个get请求的ajax。 function get(){ $.get("action.php",function(){ }) } 2、可以使用getJSON方法，这是发送get请求，但返回的结果是一个json格式的数据 function get(){ $.get("action.php",function(){ }) $.getJson("action.json",function(data){ }) } 3、要返回一个s
JQuery前端操作JSON
xiaoweids的博客
07-19 2288
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。...
JQuery前端如何操作JSON
hdxx2022的博客
03-11 858
通过上面这个表达式，就完成了将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，名称为“json”，通过“json.”或者“json[]”的方式便可进行数据访问。通过上面的计算，也可以将服务器端响应给客户端的Json格式的字符串解析成了一个Json（格式的）对象，但是该对象名称为“r”，通过“r.”或者“r[]”的方式可进行数据访问。4.对象和数组可以互相嵌套，即数组中的一个元素可以是一个对象也可以是一个数组，同理对象中的一个属性的值可以是一个对象也可以是一个数组。
使用jQuery——Ajax请求本地json文件
xuanpl的博客
03-31 2万+
很多情况下，我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时，语法如下： $.ajax({name:value, name:value, ... }) 示例如下： 本地json内容为： { "list":[ { "manage":[ {"tool":"查询工具"}, {"tool":"管
jQuery调用公共接口传json数据
qq_33840688的博客
07-23 522
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script> // https://www.baidu.com/sugrec?pre=1&p=.
Jquery遍历json的两种数据结构.pdf
11-29
Jquery遍历json的两种数据结构.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 41
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值