2

I have a html page which will show the user profile username,place,about etc. I am getting the value using ajax in jquery. Now i have question how to assign retrieved value to the DOM:

First method would be wait till i get data then dynamically create dom and append to target div

 $.ajax({
     url: "profiledata",
     type: "POST",
     success:function(data){
         $("<div><label>"+data.name</label><br/>
          <label>"+data.place</label></div>").appendTo("target div");
     }

In this method more append of string will happen so i doubt about memory consumed by the process.

Second method will be just use id to assign the value:

 $.ajax({
     url: "profiledata",
     type: "POST",
     success:function(data){
          $("#uname").text(data.name);
          $("#place").text(data.place);
     }

 <div><label id="uname"></label><br/>
<label id="place"></label></div>

Which one will be efficient in terms of loading the page i.e. lighter code and page Did i mentioned some write approach? or some better solution is there?

4

2 回答 2

1

重复操作 DOM 通常会产生开销。从这个角度来看，第一种方法似乎更合适。就 ajax 调用的速度而言，在这两种方法中以相同的方式检索数据，您可以使用.ajaxStart()并.ajaxStop()具有“加载”类的效果。

于 2013-05-02T16:03:10.303 回答
1

取决于用例，两种解决方案都有优点和缺点。

第一种方法：

  • 在您需要之前不加载元素
  • 但它也让 JQuery 在内存中创建元素，而不是修改页面上的元素。

第二种方法：

  • 不是创建元素，所以修改标记更容易一些，因为我们不是在 js 中寻找 html。
  • 现在我们必须记住隐藏元素，如果我们不希望用户看到它们

我将使用哪种方法取决于不同的因素。一般来说，我更喜欢第二种，因为当我想修改标记时，我不会在 javascript 中查找。

于 2013-05-02T16:04:39.680 回答