Как создать кнопку в 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, чтобы вставить значок перед текстом, если это то, что вам нужно.

Конечно, этого можно было бы достичь, добавив span с prepend, если вы хотите сохранить свойство text, но я думаю, что в семантическом смысле имеет смысл добавлять элементы в том порядке, в котором вы хотите их видеть.появляются.

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

Answer 2

Вы можете использовать Строки шаблона

Литералы шаблона - это строковые литералы, допускающие встроенные выражения

var input = $(`<a class="btn btn-info" href="${response}" role="button">Link</a>`);

Или вы можете использовать + оператор и разбить строку на части.

var input = $('<a class="btn btn-info" href="'+15+'"role="button">Link</a>');

Answer 3

let response = 'http://google.com';
var input = $('<a class="btn btn-info" href="' + response + '" role="button">Link</a>');
input.appendTo($("body"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

Попробуйте это решение:

$.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"));                      

                    }                       
                });