Jquery调用JSON数据

最新推荐文章于 2022-03-22 19:52:04 发布
最新推荐文章于 2022-03-22 19:52:04 发布
阅读量797 收藏 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 348
demo .html   http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> jquery获取json数据演示页面
JSON基础 Jquery调用json
LittleBearwmx的专栏
02-06 1027
JSON基础 Jquery调用json   转至：http://wenqingluomo.blog.163.com/blog/static/79171740201182132727176/?fromdm&isFromSearchEngine=yes 2011-09-21 15:27:27|  分类： Jquery|字号 订阅 前言：本文的目的是弄明白什么是JSON,JSON的数据格式
JQuery jsonp调用
just4you的博客
10-17 569
服务器端 服务器端要返回一个字符串给js调用@RequestMapping(value="/cb") @ResponseBody public JSONObject returnCallback(HttpServletRequest request){ String cb = request.getParameter("callback"); JSONObject json = n
jQuery调用JSON数据学习第一天
weixin_42306620的博客
07-09 294
jQuery调用JSON数据        JSON数据交互格式源于JavaScript语法，使用jQuery可以十分方便地读取该类型的数据。在jQuery中，有专门用于调用JSON格式的全局函数getJSON()。        JSON是一种数据交换格式，它通过key/value或数组的形势保存数据，通过使用jQuery框架，我们可以很轻松地读取，遍历，修改其中的任意内容。JSON数据的基础知...
jquery怎么操作json
tt745的博客
03-09 341
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中ajax调用json数据的使用说明
10-28
在JavaScript的世界里，jQuery库为开发者提供了非常便捷的方式来处理AJAX请求，特别是与JSON数据的交互。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它使得人们可以轻松地阅读和编写，同时...
jQuery访问json文件中数据的方法示例
10-17
当数据加载成功后，`processJsonData`函数会被调用，其中`data`参数包含了解析后的JSON数据。你可以根据需要遍历和处理这些数据，例如打印每个管道的`ElementId`。 此外，还可以利用jQuery的事件处理机制，当JSON...
jQuery调用WebService返回JSON数据及参数设置注意问题
10-27
.NET Framework 3.5的发布解决了WebService调用中json问题，本文将介绍jQuery调用基于.NET Framework 3.5的WebService返回JSON数据,感兴趣的朋友可以了解下，希望本文对你有所帮助
jQuery调用json文件
liqiyu2014的博客
03-22 1234
jQuery调用json
jQuery请求json格式数据并渲染页面
python183360的博客
05-13 5126
json格式的数据文件有两种方式 一种是xxx.json文件 一种是xxx.php文件 前者是json格式的文件 后者是输出json格式的文件 前者是本地的文件 前者是本地的文件 后者是获取数据库的数据在输出json格式的php文件 先说前者 例如有一个json格式的文件 data.json [ { 'id':'001', 'title':'百度', 'url':'http://www.baidu...
Jquery json
大漠孤烟
06-23 120
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。 这里首先给出JSON字符串集，字符串集如下： 代码如下: var data=" { root...
jQuery调用公共接口传json数据
qq_33840688的博客
07-23 519
<!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——Ajax请求本地json文件
xuanpl的博客
03-31 2万+
很多情况下，我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时，语法如下： $.ajax({name:value, name:value, ... }) 示例如下： 本地json内容为： { "list":[ { "manage":[ {"tool":"查询工具"}, {"tool":"管
jQuery读取JSON数据（jQuery调用JSON数据学习第二天）
weixin_42306620的博客
07-16 9018
        在初步了解JSON数据格式之后，接下来学习jQuery框架下，如何读取一个JSON数据。        由于JSON格式是JavaScript的原生态格式，因此，使用jQuery访问JSON数据时十分方便的，只需要将一个JSON格式的数据赋值给一个变量，就可以通过点号“.”，以“变量名，记录名称”的形式读取名称对应的值。        示例...
JQuery 获取JSON数据方法
热门推荐
霖林烟雨
02-15 4万+
简述： 使用jquery从后台获取JSON数据，显示 知识点： 1. 使用了require JS 框架 2. 用Jquery的两种方法获取后台数据 1）ajax 方法，传回的都是json数据 2）getJSON, 直接封装了一些参数{command : GetRegsiterJsonData} 项目结构： 代码： test.html My
Jquery中json的使用
kevin
03-12 1575
方式一 ①：在pom.xml中加入依赖： &lt;!-- 映射JSON --&gt; &lt;dependency&gt; &lt;groupId&gt;com.fasterxml.jackson.core&lt;/groupId&gt; &lt;artifactId&gt;jackson-databind&lt;/artifac...
写一个jquery的json 数组，再用JSON.stringify转换为json数据
最新发布
09-03
### 回答1： 以下是一个示例的 jQuery JSON 数组： ``` var myArray = [ {"name": "John", "age": 30, "city": "New York"}, {"name": "Mary", "age": 25, "city": "Los Angeles"}, {"name": "Peter", "age": 40, "city": "Chicago"} ]; ``` 然后，你可以使用 `JSON.stringify()` 方法将其转换为 JSON 数据： ``` var myJSON = JSON.stringify(myArray); console.log(myJSON); ``` 输出结果： ``` [ {"name":"John","age":30,"city":"New York"}, {"name":"Mary","age":25,"city":"Los Angeles"}, {"name":"Peter","age":40,"city":"Chicago"} ] ``` 注意：如果需要在后端使用这个 JSON 数据，需要确保它是一个有效的 JSON 对象。可以使用 JSON.parse() 方法将其转换为对象。 ### 回答2： 以下是一个使用jQuery的JSON数组的示例代码，并使用JSON.stringify将其转换为JSON数据： ```javascript // 创建一个jQuery的JSON数组 var jsonArray = [ { name: '张三', age: 25 }, { name: '李四', age: 30 }, { name: '王五', age: 28 } ]; // 转换为JSON数据 var jsonData = JSON.stringify(jsonArray); console.log(jsonData); ``` 这段代码声明了一个包含三个对象的jQuery的JSON数组。每个对象都有一个"name"属性和一个"age"属性。 通过调用`JSON.stringify(jsonArray)`，可以将该数组转换为JSON数据。 输出结果将会是一个字符串，即转换后的JSON数据： ```plaintext [{"name":"张三","age":25},{"name":"李四","age":30},{"name":"王五","age":28}] ``` 这是一个包含三个对象的JSON数组的字符串表示形式。每个对象都以大括号包围，键值对之间用逗号分隔。 ### 回答3： 如下是一个使用jQuery创建JSON数组并使用JSON.stringify方法将其转换为JSON数据的示例： ```javascript // 创建一个空的JSON数组 var jsonArr = []; // 向数组中添加JSON对象 jsonArr.push({ name: "张三", age: 25, gender: "男" }); jsonArr.push({ name: "李四", age: 30, gender: "男" }); jsonArr.push({ name: "王五", age: 28, gender: "女" }); // 使用JSON.stringify方法将JSON数组转换为JSON数据 var jsonData = JSON.stringify(jsonArr); console.log(jsonData); ``` 输出结果： ```plaintext [{"name":"张三","age":25,"gender":"男"},{"name":"李四","age":30,"gender":"男"},{"name":"王五","age":28,"gender":"女"}] ``` 以上示例中，我们首先创建一个空的JSON数组 `jsonArr`。然后，我们使用 `.push()` 方法向数组中添加三个JSON对象。最后，我们使用 `JSON.stringify()` 方法将数组转换为JSON数据，并将结果赋值给变量 `jsonData`。 通过 `console.log()` 方法打印 `jsonData`，我们可以看到输出结果为一个包含三个JSON对象的JSON数组。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值