jquery $.ajax()取xml数据的小问题解决方法 - Web前端
作者:98wpeu发布时间:2026-06-15分类:网页前端技术浏览:116
导读:开始的代码如下:复制代码代码如下:$.Ajax({type:"get",url:"database/APP_all.xml",dataType:"xml",tim...
开始的代码如下:
复制代码 代码如下:
$.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 javascriptconsole? 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()插入容器中,大功告成啦!测试均通过
复制代码 代码如下:
$.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 javascriptconsole? 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()插入容器中,大功告成啦!测试均通过
相关推荐
- 解决jquery无法找到其他父级子集问题的方法 - Web前端
- 基于jquery fly插件实现加入购物车抛物线动画效果 - Web前端
- 利用jQuery设计一个简单的web音乐播放器的实例分享 - Web前端
- jQuery+CSS实现一个侧滑导航菜单代码 - Web前端
- CKEditor无法验证的解决方案(js验证+jQuery Validate验证) - Web前端
- jQuery 移动端artEditor富文本编辑器 - Web前端
- jQuery+css3实现转动的正方形效果(附demo源码下载) - Web前端
- jquery radio的取值_radio的选中_radio的重置方法 - Web前端
- jQuery插件实现带圆点的焦点图片轮播切换 - Web前端
- jQuery Validate表单验证入门学习 - Web前端
- 网页前端技术排行
-
- 1[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 2分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 3jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 4【第六章】Foundation之按钮和下拉功能 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6jQuery编写widget的一些技巧分享 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8jQuery实现鼠标移到元素上动态提示消息框效果 - Web前端
- 9在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件:Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案:坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP:Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性


