`
齐晓威_518
  • 浏览: 619020 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

(转)jquery each解析数组 json xml

 
阅读更多

jquery each解析数组: 

 var arr = [ "one", "two", "three", "four"];      
$.each(arr, function(){      
alert(this);      
});      
//上面这个each输出的结果分别为:one,two,three,four     

var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]      
$.each(arr1, function(i, item){      
alert(item[0]);      
});      
//其实arr1为一个二维数组,item相当于取每一个一维数组,    
//item[0]相对于取每一个一维数组里的第一个值    
//所以上面这个each输出分别为:1   4   7      


var obj = { one:1, two:2, three:3, four:4};      
$.each(obj, function(key, val) {      
alert(obj[key]);            
});    
//这个each就有更厉害了,能循环每一个属性      
//输出结果为:1   2  3  4    

 

$(function() {
          function objInit(obj) {//下拉列表框初始化
              return $(obj).html("<option>请选择</option>");
          }
          var arrData = { //定义一个数组保存相关数据
              厂商1: { 品牌1_1: "型号1_1_1,型号1_1_2", 品牌1_2: "型号1_2_1,型号1_2_2" },
              厂商2: { 品牌2_1: "型号2_1_1,型号2_1_2", 品牌2_2: "型号2_2_1,型号2_2_2" },
              厂商3: { 品牌3_1: "型号3_1_1,型号3_1_2", 品牌3_2: "型号3_2_1,型号3_2_2" }
          };

          $.each(arrData, function(pF) { //遍历数据增加厂商项
              $("#selF").append("<option>" + pF + "</option>");
          });//厂商1 厂商2 厂商3

          $("#selF").change(function() { //厂商列表框选项改变事件
              objInit("#selT");
              objInit("#selC");

              $.each(arrData, function(pF, pS) {
                  if ($("#selF option:selected").text() == pF) { //如果厂商选中项与数据匹配

                      $.each(pS, function(pT, pC) { //遍历数据增加品牌项
                          $("#selT").append("<option>" + pT + "</option>");
                      });

                      $("#selT").change(function() { //品牌列表框选项改变事件
                          objInit("#selC");
                          $.each(pS, function(pT, pC) {

                              if ($("#selT option:selected").text() == pT) { //如果品牌选中项与数据匹配

                                  $.each(pC.split(","), function() { //遍历数据增加型号项
                                      $("#selC").append("<option>" + this + "</option>");
                                  });
                              }
                          });
                      });

                  }
              });
          });

          $("#Button1").click(function() { //注册按钮单击事件
              var strValue = "您选择的厂商:";
              strValue += $("#selF option:selected").text();
              strValue += "&nbsp;您选择的品牌:";
              strValue += $("#selT option:selected").text();
              strValue += "&nbsp;您选择的型号:";
              strValue += $("#selC option:selected").text();
              $("#divTip")
              .show()
              .addClass("clsTip")
              .html(strValue); //显示提示信息并增加样式
          });
      })

 

jquery each解析json

 

json:

var data=[
  {
    "name": "陶国荣",
    "sex": "男",
    "email": "tao_guo_rong@163.com"
  },
  {
    "name": "李建洲",
    "sex": "女",
    "email": "xiaoli@163.com"
  }
]

 

 

  $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件,并通过回调函数处理获取的数据
                $.getJSON("UserInfo.json", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $.each(data, function(InfoIndex, Info) { //遍历获取的数据
                        strHTML += "姓名:" + Info["name"] + "<br>";
                        strHTML += "性别:" + Info["sex"] + "<br>";
                        strHTML += "邮箱:" + Info["email"] + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

 

 

jquery each解析xml

 

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>陶国荣</name>
    <sex>男</sex>
    <email>tao_guo_rong@163.com</email>
  </User>

  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>

 

   $(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件,并通过回调函数处理获取的数据
                $.get("UserInfo.xml", function(data) {
                    $("#divTip").empty(); //先清空标记中的内容
                    var strHTML = ""; //初始化保存内容变量
                    $(data).find("User").each(function() { //遍历获取的数据
                        var $strUser = $(this);
                        strHTML += "姓名:" + $strUser.find("name").text() + "<br>";
                        strHTML += "性别:" + $strUser.find("sex").text() + "<br>";
                        strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>";
                    })
                    $("#divTip").html(strHTML); //显示处理后的数据
                })
            })
        })

分享到:
评论

相关推荐

    jQuery_Ajax_Json全解析

    **jQuery、Ajax与JSON全解析** 在Web开发中,jQuery、Ajax和JSON是不可或缺的工具,它们共同构建了现代网页的动态交互体验。本解析将深入探讨这三个概念及其相互关系。 **jQuery:简化JavaScript操作** jQuery是...

    Jquery解析JSON和XML示例

    本文将详细讲解如何使用jQuery解析JSON和XML数据,通过给出的文件名称,我们可以推测这是一个关于Web应用中添加账户和应用的场景。 首先,让我们来看看JSON(JavaScript Object Notation)和XML(eXtensible Markup...

    JQuery遍历json数组的3种方法

    在本篇文章中,我们将探讨三种使用jQuery遍历JSON数组的方法。 **方法一:使用`.each()`遍历** `.each()`是jQuery的核心函数之一,它可以用于遍历数组或对象。在第一种方法中,我们创建了一个简单的JSON对象`obj`...

    使用jQuery读取xml和json的案例代码

    本篇文章将深入探讨如何使用jQuery来读取XML和JSON数据,这两种数据格式在Web开发中广泛用于数据交换。 XML(Extensible Markup Language)是一种标记语言,用于存储和传输结构化数据。JSON(JavaScript Object ...

    JQuery解析HTML、JSON和XML实例详解

    本文将详细介绍如何使用JQuery这个流行的JavaScript库来解析HTML、JSON和XML格式的数据。JQuery提供了丰富的API,可以极大地简化数据解析的过程。 首先,让我们来了解JQuery解析HTML的能力。JQuery可以很轻松地加载...

    28_JQuery的JSON支持

    例如,可以使用`.each()`遍历JSON数组,或者通过点号`.`或方括号`[]`访问JSON对象的属性: ```javascript $.each(json.array, function(index, item) { console.log(item.property); }); var value = json.object...

    jQuery解析返回的xml和json方法详解

    本篇文章将详细介绍如何使用jQuery解析从服务器返回的XML和JSON数据。 首先,让我们来看一下jQuery如何解析XML数据。在jQuery中,`$.ajax()`函数是用于发起Ajax请求的主要工具。当`dataType`参数设置为`"xml"`时,...

    jQuery ajax读取json文件内容

    此标题直截了当,明确指出将通过jQuery的Ajax技术来获取并解析JSON文件中的数据。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。而JSON(JavaScript ...

    Jquery解析Json数据,实现级联菜单

    本主题将深入探讨如何使用jQuery解析JSON数据并实现级联菜单,这在构建动态和交互性强的用户界面时非常常见。级联菜单通常用于导航,其中下拉选项根据上一个选项的选择而变化,提供更具体的子类别。 首先,让我们...

    jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    在这个函数中,首先清空表格内容,然后使用jQuery的$.each()方法遍历返回的JSON数据。$.each()是一个强大的迭代器,它允许遍历数组或对象。对于数组中的每个元素,会创建一个新的HTML表格行(),并将相关数据填充到...

    jQuery解析json格式数据示例

    本篇文章将详细探讨如何使用jQuery解析和操作JSON格式的数据。 首先,JSON是一种数据交换格式,它基于JavaScript的一个子集。数据格式清晰,易于人阅读和编写,同时也易于机器解析和生成。JSON格式通常由键值对组成...

    轻松使用jquery解析XML

    标题中的“轻松使用jQuery解析XML”意味着我们将探讨如何利用JavaScript库jQuery处理XML文档,以便在Web应用程序中方便地获取和操作数据。XML(可扩展标记语言)是一种结构化数据格式,常用于存储和传输数据。jQuery...

    jquery与json和ajax的结合

    ### jQuery与JSON及AJAX的结合应用 #### 一、引言 随着Web技术的发展,前端框架和库的出现极大地简化了开发流程。其中,jQuery因其简洁易用的特点,在前端开发领域占据了重要的地位。本文将详细介绍如何利用jQuery...

    jQuery + Ajax + json 级联

    ### jQuery + Ajax + JSON 级联:深入解析与应用 在现代Web开发中,级联选择器(Cascade Selectors)是一种常见的用户界面设计模式,主要用于处理多层级的数据选择,如国家-省份-城市的选择。本文将深入探讨如何...

    jQuery+AJAX+JSON

    ### jQuery+AJAX+JSON 新手总结 #### 一、jQuery 概述 **1.1 什么是 jQuery?** jQuery 是一个高效的 JavaScript 库,它简化了许多 Web 开发任务,如文档遍历、事件处理、动画以及 AJAX 交互。jQuery 的核心原则是...

    json数据jquery异步示例

    以上就是关于"json数据jquery异步示例"的相关知识点,涵盖了JSON数据的创建、传输、解析以及jQuery中的异步操作和事件处理。在实际应用中,还需要考虑性能优化、安全性等问题,确保数据交互的高效和安全。

    基于jQuery的AJAX和JSON的实例.doc

    ### 基于jQuery的AJAX与JSON技术详解 #### 一、引言 随着Web技术的发展,用户体验的要求越来越高,而传统的网页加载方式已经不能满足快速响应的需求。为了解决这一问题,AJAX(Asynchronous JavaScript and XML)...

    AJAX+JQuery+JSON的综合例子

    3. **JSON**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScript的一个子集,常用于前后端数据传输。 接下来,我们将详细解释这个...

Global site tag (gtag.js) - Google Analytics