jQuery xml字符串的解析、读取及查找方法

前端技术 2023/09/01 JavaScript

本文实例讲述了jQuery xml字符串的解析、读取及查找方法。分享给大家供大家参考，具体如下：

xml字符串的解析

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<script src=\"jquery.min.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
  $(function () {
    var xml = \'<markers>\';
    xml += \'<marker carId=\"1\" carName=\"SHANGHAI\" gpsTime=\"2011-08-26 21:21:11.0\" lat=\"31.230393\" lng=\"121.473704\" direction=\"222\" speed=\"22\" />\';
    xml += \'<marker carId=\"7\" carName=\"XIAMEN\" gpsTime=\"2011-08-26 21:21:11.0\" lat=\"24.479836\" lng=\"118.089421\" direction=\"222\" speed=\"22\" />\';
    xml += \'</markers>\';
    var xmlDoc = $.parseXML(xml);
    var result=\"\";
    $(xmlDoc).find(\"markers marker\").each(function () {
      result += \"carId = \" + $(this).attr(\"carId\")
        + \" ;carName =\" + $(this).attr(\"carName\")
        + \" ;gpsTime =\" + $(this).attr(\"gpsTime\") + \"\\n\";
    });
    alert(result);
  });
</script>
</head>
<body>
</body>
</html>

请求

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>无标题页</title>
<script src=\"jquery.js\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
function search() {
  var searchStrLow = $(\"#txtTitle\").val().toLowerCase();
  $.post(\"1.xml\", function(data) {
    var html = \"\";
    $(data).find(\'book\').each(function() {
      var titleLow = $(this).find(\"title\").text().toLowerCase();
      if (titleLow.indexOf(searchStrLow)!=-1) {
        html += \"<tr><td>\" + $(this).find(\"title\").text() + \"</td>\";
        html += \"<td>\" + $(this).find(\"author\").text() + \"</td>\";
        html += \"<td>\" + $(this).find(\"year\").text() + \"</td></tr>\";
        $(\"#tbody1\").html(html);
      }
    });
  });
}
</script>
</head>
<body>
  <span>输入标题:</span><input id=\"txtTitle\" type=\"text\" />
  <input id=\"Button1\" type=\"button\" value=\"搜索\" onclick=\"search()\" />
  <table style=\"width: 100%;\">
    <thead><tr><td>Title</td><td>Author</td><td>Year</td></tr></thead>
    <tbody id=\"tbody1\">
    </tbody>
  </table>
</body>
</html>

xml：

<?xml version=\"1.0\" encoding=\"utf-8\" ?>
<bookstore>
　　<book id=\"No1\">
  　　<title>An Introduction to XML</title>
  　　<author>Chunbin</author>
  　　<year>2010</year>
  　　<price>98.0</price>
  </book>
　　<book id=\"No2\">
  　　<title>The Performance of DataBase</title>
  　　<author>John</author>
  　　<year>1996</year>
  　　<price>56.0</price>
  </book>
</bookstore>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery操作xml技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1276

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案