jQuery解析AJAX返回的html数据时碰到的问题与解决
2013-05-09 17:10
926 查看
今天做项目的时候,碰到一个问题。具体情况是,我需要使用AJAX动态的获取某个HTML页面的内容(注意,获取的不是HTML片(snip),而是真正的页面,有<html>, </html>的这种。我想的很简单,获得之后,用jQuery解析一下,取出我要的部分,然后放到页面的某个元素里面。但是,实际情况是,jQuery怎么也解析不了返回的HTML页面。代码如下:
最后,花了将近2个小时才解决,原因就是,我应该把返回的html用一个标签来包装一下,代码如下:
具体为什么要包一下,我不太清楚,很有可能是因为html里面包含的html, title, body等标记被强制的移除掉了,导致我的html不是一个合法的DOM树了,就是说根节点不止1个了。为什么html, title, body这些标记会被强制移除了,jQuery的文档有写,假如传入的html片很复杂,即超过一个标记且包含属性,那个jQuery会调用浏览器的innerHTML来创建DOM树,而浏览器通常会把那些标记移除掉。
OK,就写这么多了。完整的HTML如下:
$(document).ready(function () { jQuery.ajax({ url: "http://localhost/topCrashCommands?productId=AutoCAD 2014", type: "GET", success: function (data) { var table = $(".ui-layout-center", $(data)); $("#data").html(table.html()); }, dataType: "html" }); });
最后,花了将近2个小时才解决,原因就是,我应该把返回的html用一个标签来包装一下,代码如下:
jQuery.ajax({ url: "http://localhost/topCrashCommands?productId=AutoCAD 2014", type: "GET", success: function (data) { var wrappedObj = $("<code></code>").append($(data)); var table = $(".ui-layout-center", wrappedObj); $("#data").html(table.html()); }, dataType: "html" });
具体为什么要包一下,我不太清楚,很有可能是因为html里面包含的html, title, body等标记被强制的移除掉了,导致我的html不是一个合法的DOM树了,就是说根节点不止1个了。为什么html, title, body这些标记会被强制移除了,jQuery的文档有写,假如传入的html片很复杂,即超过一个标记且包含属性,那个jQuery会调用浏览器的innerHTML来创建DOM树,而浏览器通常会把那些标记移除掉。
OK,就写这么多了。完整的HTML如下:
<!DOCTYPE html> <html> <head> <% include header_title_meta %> <% include header_jquery %> <% include header_util %> <% include header_jquery_ui %> <% include header_layout %> <% include header_css %> <% include header_underscore %> <script> $(document).ready(function () { //jQuery.ajax({ // url: "http://localhost/weeklyCrashCount?productId=AutoCAD 2014", // type: "GET", // success: function (data) { // var wrappedObj = $("<code></code>").append($(data)); // var chart = $(".ui-layout-center", wrappedObj); // $("#data").html(chart.html()); // }, // dataType: "html" //}); jQuery.ajax({ url: "http://localhost/topCrashCommands?productId=AutoCAD 2014", type: "GET", success: function (data) { var wrappedObj = $("<code></code>").append($(data)); var table = $(".ui-layout-center", wrappedObj); $("#data").html(table.html()); }, dataType: "html" }); }); </script> </head> <body> <% include fragment_header %> <% include fragment_links %> <div id="data" class="ui-layout-center"> </div> </body> </html>
相关文章推荐
- jQuery解析AJAX返回的html数据时碰到的问题与解决
- jQuery解析AJAX返回的html数据时碰到的问题与解决
- jquery的ajax请求成功OK,返回了数据,但是不进success的问题解决办法
- jQuery在异步请求数据返回后,调用$("selector").html(data.content);之后因为一些特殊字符或者',"不能显示内容的问题解决办法
- var dataObj=eval("("+data+")");//转换为json对象(解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误)
- jQuery中ajax请求后台返回json数据并渲染HTML
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
- 【jQuery】解决在循环中使用ajax异步时,数据的同步问题
- jQuery.ajax 返回JSON数据 IE8 缓存问题
- ajax接收action的数据返回一大串的html代码的问题
- 关于解决JQuery发送Ajax请求后,IE缓存数据不更新的问题
- Jquery form.js文件上传返回JSON数据,在IE下提示下载文件的解决办法,并对返回数据进行正确的解析
- AJAX用jquery解析servlet返回回来的XML 数据
- jQuery学习笔记--ajax查询,jQuery解析返回的json数据 详解
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- 《走过的路 踩过的坑》--jQuery ajax dataType返回出错问题及解决
- Jquery JavaScript解析Ajax返回的json数据(转)
- 解决ajax回调方法返回当前html的问题
- 解决ajax请求返回Json无法解析"\"字符的问题
- jquery中ajax方法提交数据时,中文乱码问题解决。