如何显示ajax DB查询的结果

How do I display the resuls of my ajax DB query?

本文关键字：DB 查询 结果 ajax 何显示 显示      更新时间：2023-09-26

我正在用一些返回2个字段的查询查询我的DB。我只是想知道如何更好地显示搜索结果。

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

的例子:

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

我希望事情会有所改善，像jquery这样更好的东西可以使用吗?我的确上网搜索了，但找不到任何有用的东西。

字符串连接仍然很流行。但是使用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解析器一次性构造所有元素。

你可以在JQuery中使用追加函数

$(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

相关文章：