使用 AJAX 在 HTML 中填充选择框答案

【问题标题】：Populate a Select box in HTML using AJAX使用 AJAX 在 HTML 中填充选择框
【发布时间】：2012-04-17 07:50:31
【问题描述】：

我正在尝试创建一个简单的 html5 页面，当页面加载时，Select HTML5 对象将填充一个存储在 XML 中并使用外部 javascript 文件调用的值列表。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body onLoad="javascript:loadXML()">
        <header>
            <h1></h1>
        </header>
        <form name="myForm" method="GET" action="">
            <select id="cbLDAP"></select>
        </form>
        </div>
    </body>
</html>

JS：

// variables declaration
var XML_PATH = "XML/ou.xml";
var select = $('#cdLDAP');
// load XML file
function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function(xml)
            {
                $(xml).find('LDAP').each(function()
                {
                    var ou = $(this).find('OU').text();
                    select.append("<option/><option class='ddheader'>"+ou+"</option>");
                });
                $(this).find('Name').each(function(){
                    var name = $(this).text();
                    select.append("<option class='ddindent' value='"+ name +"'>"+name+"</option>");
                });
            }
    });
}

XML：

<?xml version= "1.0" encoding="UTF-8"?>
<DropDown>
    <LDAP>
        <OU>1</OU>
        <OU>2</OU>
        <OU>3</OU>
        <OU>4</OU>
        <OU>5</OU>
        <OU>6</OU>
    </LDAP>
</DropDown>

当我在 Firefox 11 中加载我的 html 文件时，未填充 Select 对象。我究竟做错了什么？谢谢。

【问题讨论】：

标签： xml ajax html xml-parsing

【解决方案1】：

您在 SELECT 元素的 ID 和 jQuery 附加代码之间有错字。此外，您正在遍历没有文本值的父节点，而不是子“OU”节点。

下面是一些修复 XML 解析并清除一些错误命名的元素 ID 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
</head>
<body>
  <header>
      <h1></h1>
  </header>
  <form name="myForm" method="GET" action="">
      <select id="cdLDAP">
        <option/>
      </select>
  </form>
  </div>
  <script type="text/javascript">
    // variables declaration
    var XML_PATH = "XML/ou.xml";   
    // load XML file
    $(function() {
      $.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function(xml) {
          $(xml).find('LDAP').find('OU').each(function(i) {
            var ou = $(this).text();
            $('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>");
          });
          $(this).find('Name').each(function() {
            var name = $(this).text();
            $('#cdLDAP').append("<option class='ddindent' value='"+ name +"'>"+name+"</option>");
          });
        }
      });
    });    
  </script>
</body>    
</html>

最后，值得注意的是，onLoad 操作和将解析代码包装在一个函数中对于 jQuery 来说并不是真正必要的。并且不要忘记将客户端代码与 XML 文件放在同一台服务器上，否则您将遇到阻止 AJAX 获取 XML 数据的同源策略。

【讨论】：

部分中的
在部分中，我像您一样添加了 jQuery，只是我从 jQuery CDN 加载了它的最新版本。从 CDN 加载静态文件通常效率更高，但实际上我只是这样做并内联脚本以使其成为一个独立的、易于运行的原型。内联脚本对于快速开发很有用，但我不建议在最终产品中使用它们，尽管可能会有一些用例这样做，从单个 JS 文件（或只是几个）以减少页面加载所需的 HTTP GET 请求。
感谢这确实有效。你肯定会收到支票，但我还有两个问题。 1）“head”部分的脚本标签之间的信息是什么？ 2）要使用外部文件，我是否只需将第二个标签更改为读取code<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
1.) 我不确定脚本标签和头部之间的哪些字符或信息您不理解。如果您的意思是“charset”属性，它是一个可选属性，用于指定脚本文件的编码............ 2.）正确，您只需复制并粘贴所有内容内联脚本，从文本开始：“// 变量声明”并以最后的右括号结束：“});”。然后把它放在你的“main.js”文件中，并按照你的描述包含脚本。
这只是 JavaScript 源文件的路径 (URL)。在这种情况下，它是通过其自己的内容交付网络 (CDN) 加载的 jQuery 库的完整路径，这是加载 jQuery 的推荐方式之一。