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，但它可以很容易地适应任何首选格式。

希望这有帮助！

Answer 2

如果要使用AJAH电话的结果填充元素，请查看load method。

我不知道现有的插件专门将JSON数据加载到选择列表中，但是写一个就足够简单了。

更好的方法或可重用的代码来填充HTML元素或在jQuery AJAX调用之后创建一个select

2 个答案: