关于jquery ajax 上传文件返回json内容包含html标签不识别问题

最新推荐文章于 2023-05-17 10:50:54 发布

cilwfvip

最新推荐文章于 2023-05-17 10:50:54 发布

阅读量8.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cilwfvip/article/details/8538373

本文探讨了使用jQuery AJAX上传文件时，返回的JSON数据中包含HTML标签无法正常识别的问题。问题源于jQuery.form.js插件通过iframe提交表单的方式，导致HTML标签被转义。解决方案包括将dataType设置为'text'或利用JSON_HEX_TAG选项来避免标签被转义。

在项目中，用到了jquery jquery.form.js 来进行ajax上传图片的操作。

为了开发方便，直接在服务器端输出的json数据中包好了拼装好的html代码。

结果呢，success函数没有执行。

你可以试试，直接$.getJSON()返回的数据中包含html代码是没有问题的。

其实，这是由于jquery.form.js 对对上传文件采用的是iframe提交表单的方式所导致的，有兴趣的可以看下源代码：

xhr.responseText = doc.documentElement ? doc.documentElement.innerHTML : null;
xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;

看看，是这样获取返回的内容。

$a=array();
$a['c']="<a>你好</a>";
$a['b']="hello";
echo json_encode($a);

输出的正确的内容：

{"c":"<a>\u4f60\u597d<</a>","b":"hello<"}

为了调速将修改为 dataType:'text'

而客户端获取的内容是：

{"c":"<a>\u4f60\u597d<\/a>","b":"hello<\/font>"}</a>

可见，由于 / 被处理为\/,浏览器认为标签不完整，将标签给自动补齐而导致多了标签。
ok 找到原因了：html标签< >导致的。
如何解决：
将标签< > 编码：
$json=json_encode($a);
$json=strtr($json, array('<'=>'\u003C',">"=>'\u003E'));

echo $json;

若phpversion>5.3.0 可以 echo json_encode($a,JSON_HEX_TAG);

如此，html代码从json中正常取到了！keyword:ajax file get json width html,ifrmae