Ajax - xml格式

最新推荐文章于 2021-09-07 20:56:28 发布

Henry_ww

最新推荐文章于 2021-09-07 20:56:28 发布

阅读量237

点赞数

分类专栏：前端文章标签： XML DOM jQuery AJAX 数据解析

本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/120164309

版权

前端专栏收录该内容

19 篇文章

订阅专栏

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!-- 根元素 -->
<root>
  <!-- 可以开始描述数据了 -->
  <!-- 描述一个数组 -->
  <items>
    <!-- 描述数组中的每个成员 -->
    <item>
      <!-- 使用标签名称描述属性名称，标签中间的内容就是属性值 -->
      <name>jack</name>
      <age>20</age>
    </item>
    <item>
      <!-- 使用标签名称描述属性名称，标签中间的内容就是属性值 -->
      <name>rose</name>
      <age>18</age>
    </item>
    <item>
      <!-- 使用标签名称描述属性名称，标签中间的内容就是属性值 -->
      <name>lili</name>
      <age>21</age>
    </item>
  </items>
</root>

解析 xml

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./libs/jquery/jquery.js"></script>
  </head>
  <body>
    <button>点名了</button>
    <ul></ul>

    <script>
      $('button').on('click', function() {
        $.ajax({
          url: './data/myxml.xml',
          // url: 'http://127.0.0.1:3001/getUserNameXML',
          success: function(res) {
            console.log(res)
            // 解析xml就像解析html结构一样，所以你可以直接使用dom的api来进行处理
            let items = res.querySelectorAll('item')
            let html = ''
            for (let i = 0; i < items.length; i++) {
              let name = items[i].querySelector('name').innerHTML
              let age = items[i].querySelector('age').innerHTML

              html += `<li>
                        <span>${name}</span>---
                        <span>${age}</span>
                      </li>`
            }
            document.querySelector('ul').innerHTML = html
          }
        })
      })
    </script>
  </body>
</html>