jquery - 如何使用 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>

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

oSettings is null [Break On This Error]
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