我有来自 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;
提前致谢!
最佳答案
XML 响应的处理方式与任何其他数据类型一样。 只要您指定它应该期望什么类型。
This question向您展示如何在 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 中内联函数。
阅读early event handler registration与 traditional event registration model
关于jquery - 如何使用 jQuery 从 REST xml 响应构建数据表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9585760/