使用 JavaScript 查询以在 HTML 文档中按日期显示事件答案

【问题标题】：Query using JavaScript to display events by date in HTML document使用 JavaScript 查询以在 HTML 文档中按日期显示事件
【发布时间】：2011-06-13 20:35:42
【问题描述】：

我是 javascript 新手，需要帮助。我不确定我应该使用 AJAX 还是 Xquery。

我有一个 XML 文件，我想按日期和建筑提取所有程序，并且只在 HTML 文档中显示名称、房间和时间。

我想这样做，以便显示所有 6 月 13 日星期一的活动，然后明天网页将显示 2011 年 6 月 14 日星期二的活动等。

我将部分 XML 和 HTML 复制到这篇文章中。

请帮忙。我不知道该怎么做。

这里是 XML 的一个小样本，因为有大约 90 个程序我在这个列表中做了缩短。

<ProgramList>
    <Program>
        <Name>English Conversation Group - Wed.  Morning</Name>
        <Building>Centereach</Building>
        <Room>Foundation Room</Room>
        <Date>6/14/2011</Date>
        <Time>9:30 AM-11:30 AM</Time>
    </Program>
    <Program>
        <Name>Family Center- One on One Counseling</Name>
        <Building>Selden</Building>
        <Room>Lower Meeting Room</Room>
        <Date>6/15/2011</Date>
        <Time>9:30 AM-4:00 PM</Time>
    </Program>
</ProgramList>

这是 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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="nature2.js"></script> 
    <title>Untitled Document</title>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" text="#444316">
    <script type="text/javascript">
function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
}

xml=loadXMLDoc("ProgramList.xml");
path="/ProgramList/Program/*";
// code for IE
if (window.ActiveXObject)
{
    var nodes=xml.selectNodes(path);

    for (i=0;i<nodes.length;i++)
    {
    document.write(nodes[i].childNodes[0].nodeValue);
    document.write("<br />");
    }
}

// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
    var nodes=xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
    var result=nodes.iterateNext();

    while (result)
    {
        document.write(result.childNodes[0].nodeValue);
        document.write("<br />");
        result=nodes.iterateNext();
    }
}
    </script>
</body>
</html>

我去该站点查看示例，但收到未知错误并且示例未加载。所以链接没有帮助。

我想要 3 个 html 页面。

第一个 HTML 页面将为我提供按日期分组的所有程序（名称）。因此，只有今天的节目才会同时显示两座建筑。

我希望显示以下结果：

第二个 Html 页面将为我提供按日期和建筑物 1 （Centereach）分组的所有程序（名称）。所以只有今天的节目才会显示为 buidling 1。

第 3 个 Html 页面为我提供按日期和建筑物 2 (Selden) 分组的所有程序 (名称)。只有今天的节目才会显示 2 号楼

我希望在第 2 页和第 3 页显示以下结果：

我还希望页面随着日期的变化自动更新。

您还有其他建议吗？

【问题讨论】：

标签： javascript html xml ajax xquery

【解决方案1】：

通常只有在服务器上执行 Xqueries 才有意义。但是您仍然必须解析响应以从结果中提取要显示的数据。

底线：如果您的数据集很大，最好在服务器上进行过滤（查询），并且只使用 Ajax 通过网络获取最小的数据集。

但也可以选择从客户端使用 Xquery： http://www.xqib.org/

检查一下，如果有帮助，请告诉我。

【讨论】：