Лучший способ или повторно используемый код для заполнения элемента HTML или создания выбора после вызова jQuery AJAX

Question

Я часто делаю 2 вещи в JS, сейчас использую jQuery:

Первый - это заполнение HTML-элемента, который может выглядеть следующим образом:

$.get('http://www.example.com/get_result.php', { id: 1 }, function (data) {
    $('#elementId').html(data);
});

Второй - заполнение элемента select результатом JSON, например:

$.getJSON('http://www.example.com/get_result.php', { id: 1 }, function(data) {
      $.each(data, function(value, name) {
          $('#selectField').append('<option value="' + value + '">' + name + '</option>');
      }
)};

То, что я ищу, - это либо лучшее из того, что я делаю, либо расширение (либо библиотека, либо кусок кода) для jQuery, которое будет делать это без необходимости повторного создания кода. Или в jQuery уже есть что-то, что делает это быстрее?

Редактировать: Как упомянул Кевин Горски , заполнение HTML-элемента может быть сделано как:

$('#elementId').load('http://www.example.com/get_result.php', { id: 1 });

Это прекрасно. Хотя, если вы хотите сделать POST, это не сработает. Тогда лучше использовать метод Коллина Аллена .

Answer 1

Вот быстрый плагин jQuery, который я написал, который делает ваш первый пример более пригодным для повторного использования:

(function ($) {
    $.fn.populateWith = function(sUrl, oData, fCallback) {
        if (!oData) oData = false;
        if (!fCallback) fCallback = false;
        $(this).load(sUrl, oData, fCallback);
    };
})(jQuery);

Вы выбираете элемент <select> (или группу элементов, в зависимости от вашего селектора jQuery) и просто загружаете заданный результат из бэкэнда, например так:

$("#firstSelect").populateWith("backend.html");

Или с обратным вызовом, который срабатывает после завершения загрузки:

$("#secondSelect").populateWith("backend.html", false, function() {
    alert('Callback fired!');
});

Или с обратным вызовом и переданными данными:

$("#thirdSelect").populateWith("backend.html", {id: 1}, function() {
    alert('Callback fired with data!');
});

Вы также можете вызвать его с помощью объекта данных и без обратного вызова, но вы поняли идею! По сути, этот маленький плагин позволяет вам беспокоиться о том, какие параметры вы хотите и где вы хотите их, не занимаясь деталями на стороне клиента. Ожидается, что выходные данные со стороны сервера будут представлять собой простой HTML, но его можно легко адаптировать для обработки любого предпочтительного формата.

Надеюсь, это поможет!

Answer 2

Для заполнения элемента результатами вызова AJAH, проверьте метод загрузки .

Я не знаю о существующем плагине для конкретной загрузки данных JSON в список выбора, но было бы достаточно просто написать один.