我发现自己经常在 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方法比较好。
最佳答案
这是我编写的一个快速 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,但它可以轻松地进行调整以处理任何首选格式。
希望这有帮助!
关于jquery - 更好的方法或可重用代码来填充 HTML 元素或在 jQuery AJAX 调用后创建选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/365699/