javascript - 如何在jquery中创建一个按钮，使其href属性等于ajax响应

Question

有像这样的ajax请求:

$.ajax({
  type: 'POST',
  url: 'mysite/action',
  dataType: 'json',
  data: postData,
  success: function(response) {
    console.log(response);
    var input = $('<a class="btn btn-info" href="....response...." role="button">Link</a>');
    input.appendTo($("body"));
  }
});

我在 ajax 响应中获得一个链接，如何创建一个其 href 属性等于该 ajax 响应的按钮？

Answer 1

您还可以在对象中传递属性，该对象将为您处理字符串清理问题，例如转义引号:

$('<a/>', {
   'class': 'btn btn-info',
   href: response,
   role: 'button',
   text: 'Link'
}).appendTo('body');

<小时/>

为了响应下面的评论，只需将类似构造的范围传递给append。与下面的示例相比，我从属性对象中删除了 text 属性，并在后续的 append 调用中添加链接文本，以在文本之前插入图标，如果这是您想要的。

如果您想保留文本属性，当然可以通过添加带有 prepend 的跨度来实现，但我认为按顺序添加元素更具语义意义您希望它们出现。

$('<a/>', {
   'class': 'btn btn-info',
   href: response,
   role: 'button'
}).append(
   $('<span/>', { 'class': 'glyphicon glyphicon-download' })
).append(' Link')
 .appendTo('body');