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中substr,substring,slice.splice的区别说明
Nov 25 Javascript
juqery 学习之四 筛选查找
Nov 30 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
详解angular ui-grid之过滤器设置
Jun 07 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
Javascript设计模式之原型模式详细
Oct 05 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
php 设计模式之 单例模式
2008/12/19 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
取选中的radio的值
2010/01/11 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
玩转方法:call和apply
2014/05/08 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
会议室标语
2014/06/21 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
我的中国梦主题班会
2015/08/14 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
《藏戏》教学反思
2016/02/23 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python