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

最后发布: 2008-12-13 20:44:30


问题

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

第一个是填充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的方法更好。

jquery ajax
回答

这是我写的一个快速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,但是可以很容易地修改为处理任何首选格式。

希望这可以帮助!


回答

要用AJAH调用的结果填充元素,请检查load方法

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