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

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

  myprocess 15581 Ajay XYZ Jogging Athletic 2011-11-22 00:00:00.0 User5   

我的HTML：

  
 ..... 
 
 
 
 
 
eventId
 
processId
 
batchId
 
user
 
participant
 
activity
 
note
 
createdOn
 
createdBy
 
 
 
 
 
  

使用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; }  

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

oSettings为null [打破此错误]
var iRow = oSettings.aoData.length;

提前致谢！

Answer 1

像任何其他数据类型一样处理XML响应。 只要您指定它应该期望的类型。

这个问题向您展示了如何在JQuery中解析XML。 XML的处理方式与任何其他元素一样。

这是一个例子。

 $.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后，我无法重现这个问题。

看看这个测试示例

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

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

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

阅读早期事件处理程序注册与传统事件注册模型

Answer 2

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

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

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

你如何处理这一切取决于你的需求。 代理服务器相对容易设置。

如果REST提供JSONP，则可以绕过代理

编辑。 另一种方法是使用像Yahoo YQL这样的服务作为代理。 可以在几分钟内设置