使用jQuery解析JSON生成HTML a标签异常问题求助

我来帮你排查这个问题啦！你遇到的部分a标签内容跑到标签外部的情况，根本原因是拼接HTML字符串时没有给href属性值加上引号——当JSON里的URL包含空格、&这类特殊字符时，浏览器会把这些字符后面的内容当成新的HTML属性或文本，直接打乱了标签的解析结构，自然就出现异常了。

举个简单例子：如果URL是http://example.com/news item?id=1，没加引号的话，浏览器会把href=http://example.com/news当成一个独立属性，item?id=1就会被识别成标签外的文本，最终导致显示错乱。

修正方案一：给href加上引号 #

直接修改你原有的字符串拼接代码，给href的属性值加上转义的双引号即可：

<script>
$.ajax({
  url: 'http://cybersecurity.apievangelist.com/apis/news/',
  type: 'GET' // 这个是默认值，标注出来也没问题
}).done(function(data){
  var objone = JSON.parse(data);
  for (i in objone) {
    // 重点：给href的值加上双引号，用转义符\"处理特殊字符
    $('#myContent').append("<div class='well'><a href=\"" + objone[i].url + "\">" + objone[i].title +"</a><br /></div>");
  }
});
</script>
<div class="container" id="myContent">
</div>

修正方案二：用jQuery创建元素（更推荐） #

字符串拼接HTML不仅容易遇到解析问题，还存在XSS安全风险。更稳妥的方式是用jQuery的API直接创建DOM元素，它会自动处理特殊字符转义：

<script>
$.ajax({
  url: 'http://cybersecurity.apievangelist.com/apis/news/',
  type: 'GET'
}).done(function(data){
  var objone = JSON.parse(data);
  // 用$.each遍历更安全，避免for...in遍历到原型链上的冗余属性
  $.each(objone, function(index, item) {
    // 创建well容器
    var wellDiv = $('<div>').addClass('well');
    // 创建a标签，直接设置href和文本内容
    var newsLink = $('<a>').attr('href', item.url).text(item.title);
    // 把链接添加到容器，再插入到页面目标区域
    wellDiv.append(newsLink).append('<br>');
    $('#myContent').append(wellDiv);
  });
});
</script>
<div class="container" id="myContent">
</div>

这种方式不仅能彻底解决当前的标签解析问题，代码的可读性、安全性和后续维护性也更高哦~

内容的提问来源于stack exchange，提问作者Ssravankumar Aditya