Question

我需要使用javascript更新html DOM，方法是在用户点击Thymeleaf模板中的链接时插入一个调用javascript函数的链接。

$.ajax({
  type: "GET",
  beforeSend: function(xhrObj){
    xhrObj.setRequestHeader("Content-Type","application/json");
    xhrObj.setRequestHeader("Accept","application/json");
  },
  url: "/users/list",
  dataType:"json",
  success: function( data,  textStatus,  jqXHR){
        var table = $("#userlist").children();
        for(i in data){
            table.append("<tr><td><a onclick='user_see("+data[i].userId+")' th:href='#'>"+data[i].userId+"</a></td><td>"+data[i].firstName+"</td><td>"+data[i].lastName+"
            }
   }
});

事实证明，Thymeleaf用双引号替换单引号。我已经尝试用\“＃”;但是当页面加载时我只得到一个Thymeleaf解析错误

Thu Oct 30 17:55:21 EAT 2014 出现意外错误（type = Internal Server Error，status = 500）。解析文档的异常：template =＆＃34; users / list＆＃34;，

如何逃避单引号？

Answer 1

最安全的做法是不将HTML作为字符串附加，而是使用DOM API。它比较啰嗦，但避免引用问题：

 data.forEach(function(datum) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var a = document.createElement('a');
    a.onclick = function() { user_see(datum.userId); };
    a.setAttribute('th:href', '#');
    a.innerHTML = datum.userId;
    tr.appendChild(td);
    td = document.createElement('td');
    td.innerHTML = datum.firstName;
    tr.appendChild(td);
    td = document.createElement('td');
    td.innerHTML = datum.lastName;
    tr.appendChild(td);
    table.appendChild(tr);
}

如何逃脱百里香和javascript代码中的单引号

1 个答案: