jquery - 更好的方法或可重用代码来填充 HTML 元素或在 jQuery AJAX 调用后创建选择

Question

我发现自己经常在 JS 中做两件事，目前使用 jQuery:

第一个是填充 HTML 元素，可能如下所示:

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

第二个是用 JSON 结果填充 select 元素，例如:

$.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 中是否已经有一些东西可以让这个速度更快？

编辑:如Kevin Gorski所述，填充 HTML 元素可以这样完成:

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

这太完美了。不过，如果你想做一个 POST，那是行不通的。然后做Collin Allen's方法比较好。

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，但它可以轻松地进行调整以处理任何首选格式。

希望这有帮助!