如何显示ajax数据库查询的结果？

Question

我正在用一些返回2个字段的查询来查询我的数据库。 我只是想知道显示搜索结果的更好/最好的方法是什么。

在过去，我会一直使用字符串连接。

例：

var html="";
$.each(data, function () {
    var html = html + "<div><span>" + this.field1 + "</span><br /><span>" + this.field2 + "</span><br /></div>";
});

我希望情况会有所改善，可以使用更好的东西，例如jquery？ 我确实在网上搜索，但找不到任何有用的信息。

非常感谢。

Answer 1

字符串连接仍然很流行。 但是，使用jQuery可以使用对象语法创建元素：

$.each(data, function() {
    var field1 = $("<span>", { text: this.field1 });
    var field2 = $("<span>", { text: this.field2 });
    $("<div>").append(field1, "<br>", field2).appendTo("#results");
});

但是，这很可能会比连接版本慢。 这对DOM函数进行了大量调用，以创建元素并将它们一次附加到DOM。 另一方面，字符串连接是相对有效的。 如果您完成所有串联操作，然后最后最后执行$("#results").html(html) ，它将利用浏览器的内部HTML解析器一举构建所有元素。 在所有浏览器中都对此进行了非常优化。

Answer 2

您可以在JQuery中使用append函数。

$(document).ready(function () {
   var div = $("<div></div>");
   var span1 = $("<span></span>");
   span1.append("value 1");
   var span2 = $("<span></span>");
   span2.append("value 2");
   div.append(span1).append("<br>").append(span2).append("<br>");
   $("body").append(div);
});

将文本值替换为您从查询返回的值。

见我的JSFiddle