Question

我的html中有一个div，

<div id="datadiv"></div>

在我的脚本中，我通过向服务器发送请求来更新div（datadiv）。

<script>

  $.ajax({
  url: 'getusers.do',
  dataType: 'html',
  success: function( data ) {
      $("#datadiv").html(data);
      console.log($("#namespan").data("options").name); //undefined 
  }
  })

</script>

Java代码：

StringBuffer sb = new StringBuffer();
String username = "";

// The below code runs in a for loop. I have many usernames.
username = "François L'Écuyer"; // This is a French name. 
sb.append("<span id=\"namespan\" data-options='{\"name\":\""+username+"\"}'>"+username+"</span>");
//Loop ends

return sb.toString(); //This value is returned to the ajax success.

当我得到存储在数据中的名称时。我得到了不确定。数据选项被截断并破坏。

Answer 1

让jquery处理它。尝试使用jquery构造元素，而不是构造为字符串：

var username = "François L'Écuyer";
var temp_data = $('<span/>', {'id': 'namespan', 
                            'data-options' : '{"name":"'+username+'"}',
                            'text':'UserName'});
$("#datadiv").html(temp_data);

<强> Demo

或字符串化对象

var data = { name: username } ;
var temp_data = $('<span/>', {
    'id': 'namespan',
    'text': 'UserName',
    'data-options': JSON.stringify(data)
});

$("#datadiv").html(temp_data);

<强> Demo

<强>更新

正确的编码以添加适当的转义应该使它正确。而不是使用\"来包装数据属性值JSON的键/值使用"并尝试类似：

'<span id="namespan" data-options="{&quot;name&quot;:&quot;'+username+'&quot;}">UserName</span>'

或者可能在java中：

"<span id=\"namespan\" data-options=\"{&quot;name&quot;:&quot;"+username+"&quot;}\">"+username+"</span>"

Demo

当值为法语名称时，jQuery data-options会截断

1 个答案: