jquery $.ajax()取xml数据的小问题解决方法


Posted in Javascript onNovember 20, 2010

开始的代码如下:

$.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()插入容器中,大功告成啦!测试均通过
Javascript 相关文章推荐
javascript this用法小结
Dec 19 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
详解JS模块导入导出
Dec 20 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
简单实用的js调试logger组件实现代码
Nov 20 #Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 #Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 #Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 #Javascript
javascript来定义类的规范小结
Nov 19 #Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 #Javascript
js 创建快捷方式的代码(fso)
Nov 19 #Javascript
You might like
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Node 代理访问的实现
2019/09/19 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
Python中类型检查的详细介绍
2017/02/13 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python用input输入列表的实例代码
2020/02/07 Python
python中类与对象之间的关系详解
2020/12/16 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
要账委托书范本
2014/09/15 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
先进个人自荐书
2015/03/06 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android