如何使用 jQuery 从 REST xml 响应构建数据表？

Question

我有一个来自 Ajax REST 调用的 XML 响应。与下面的类似。

    <eventBlock>
        <event eventId="641">
            <processId>myprocess</processId>
            <batchId>15581</batchId>
            <user>Ajay</user>
            <participant>XYZ</participant>
            <activity>Jogging</activity>
            <note>Athletic</note>
            <createdOn>2011-11-22 00:00:00.0</createdOn>
            <createdBy>User5</createdBy>
        </event>
    </eventBlock>

我的 HTML：

    <form class="searchform" id="searchform" action="javascript: submitForm();">
     .....
    </form>
    <div id="UI">
        <table id="events" class="display">
                <thead>
                        <tr>
                            <th>eventId</th>
                            <th>processId</th>
                            <th>batchId</th>
                            <th>user</th>
                            <th>participant</th>
                            <th>activity</th>
                            <th>note</th>
                            <th>createdOn</th>
                            <th>createdBy</th>
                        </tr>
                </thead>
                <tbody>
                </tbody>
        </table>
    </div>

Javascript：

<script type="text/javascript">
var thisTable;
thisTable = $("#events").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);
        function addToTable(response){
            var $events = $(response).find("event");

            $events.each(function(index, event){
                var $event = $(event),
                    addData = [];

                addData.push($event.attr("eventId"));
                addData.push($event.children("processId").text());
                addData.push($event.children("batchId").text());
                addData.push($event.children("user").text());
                addData.push($event.children("participant").text());
                addData.push($event.children("activity").text());
                addData.push($event.children("note").text());
                addData.push($event.children("createdOn").text());
                addData.push($event.children("createdBy").text());

                thisTable.fnAddData(addData);
            });
        }

        function submitForm() {
            $.ajax({
                url:'../../data.xml',
                data:{
                    batchId:1234,
                    processId:afsfafgg  
                },
                type:"GET",
                success:addToTable
            });
            return false;
        }
</script>

当我点击提交时。我在萤火虫上得到以下错误。有人可以帮我解决这个问题吗？

o设置为空 [中断此错误]
var iRow = oSettings.aoData.length;

提前致谢！

Answer 1

XML 响应的处理方式与任何其他数据类型一样。 只要你指定它应该期待什么类型。

This question 向您展示如何在 JQuery 中解析 XML。 XML 的处理方式与任何其他元素一样。

Here's an example.

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            dataTable.fnAddData(addData);
        });
    }
});

如果您不想遍历每个事件中的所有子级，则可以手动分配它们

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            addData.push($event.children("processId").text());
            addData.push($event.children("batchId").text());
            addData.push($event.children("user").text());
            addData.push($event.children("participant").text());
            addData.push($event.children("activity").text());
            addData.push($event.children("note").text());
            addData.push($event.children("createdOn").text());
            addData.push($event.children("createdBy").text();

            dataTable.fnAddData(addData);
        });
    }
});

确保您发送到 fnAddData 的数组中的项目与表中的标题一样多。

编辑

检查您的 HTML 和 Javascript 后，我​​无法重现该问题。

Check out this test example

我会猜测并说有更多的代码，你没有包含，这会影响结果。

我应该指出，内联 javascript 函数在 webdev 圈子中通常是不受欢迎的。您应该尝试将您的 javascript 代码与 html 代码分开，就像在后一个示例中一样。

使用 $("#form").submit(function{...}); 而不是在 html 中内联函数。

阅读 early event handler registration 与 traditional event registration model

Answer 2

REST 可能是跨域的，在这种情况下，您需要在服务器上创建一个代理来检索 XML。代理成为你的 ajax url。

如果您的目标是创建一个“只读”表，您可以简单地将 xml 作为输出打印到 ajax 请求，并在调用数据表之前在 ajax 成功回调中自己将输出解析到表。

如果您需要编辑功能并希望将数据源直接传递给数据表插件，则需要将 xml 服务器端解析为 json。

您如何处理这一切都取决于您的需求。无论哪种方式，代理都相对容易设置。

如果 REST 服务 JSONP，可以绕过代理

编辑。另一种方法是使用像 Yahoo YQL 这样的服务作为代理。几分钟就能搞定