DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery $.ajax()取xml數據的小問題解決方法
jquery $.ajax()取xml數據的小問題解決方法
編輯:JQuery特效代碼     
開始的代碼如下:
代碼如下:
$.ajax({
type: "get",
url: "Database/App_all.xml",
dataType: "xml",
timeout: 2000,
beforeSend: function () {},
success: function (xml) {
$(xml).find("app[id='id-1']").find("auther").appendTo($("#contain"));
},
error: function () {
alert("ajax failed!");
}
});

也就是,從App_all.xml這個文件中找到id為“id-1”的這一項,並將繼續在其子節點中找到auther標簽,並將其內容加入到id 為contain
的div中,xml中我要查找的內容為<auther>cocept</auther>,我就是想把cocept這個字段取出來,放入容器中

結果這段代碼在firefox中生效,在opera中也生效,但是在Safari和chrome中卻沒有效果,於是我上jQuery的官方論壇,和StackFlowover
論壇提問,後者有人回復我:
  I assure you I was using $.ajax with Chrome just five hours ago at the office, and had no such problem.
  I also imagine they use it here on SO and I have no problems here. I have no problems on jQueryUI in Chrome. I think it is your code.
大意就是斬釘截鐵的說他用起來沒有問題,是我自己的問題,我也納悶了,後面也有人給我的建議更復雜:


You should use chrome's or safari's built-in developer tools (ctrl+shift+i) to track JS errors and track actual AJAX requests.


Is your code wrapped in document.ready? Is there any erros in javascript console? Also try to output something after success callback line.
Another cause for this could be incorrect mime-type for your XML file returned by server. It should be [Content-type: text/xml].
You can check that in chrome's or safari's built-in developer tools - just look for headers tab when xml resource is selected.
If it 's actual problem, you may need to tweak web-server configuration (main config or .htaccess for apache) to return correct mime-type

畢竟是自學jquery ajax框架剛起步……就遇到這麼棘手的問題,的確麻煩……

但是,由於我一個不經意的發現,問題迎刃而解……

我用firebug查看成功後的頁面元素狀態,發現:
代碼如下:
<div id="contain">
<auther>cocept</auther>
</div>

我恍然大悟,原來這種直接用pretendTo插入的方法會連tagname也插入進去,難怪chrome和Safari不能識別(從另一個方面來說Firefox原來強大這麼多……)  於是修改後的代碼如下:
代碼如下:
success: function (xml) {
$("#contain").html($(xml).find("app[id='id-1']").find("auther").text());
}

先取出所需元素的text()的值,再以修改html的方法html()插入容器中,大功告成啦!測試均通過
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved