Jquery ajax刷新，无法让它工作

Okay so to make a long story short I am using this script in a jquery mobile envoirment. I am using ajax in it to grab results from the database. I currently works, however it does not refresh automatically. I have read numerous online posts about how to use the set interval function and I have tried that. However when I try it, it works, but it keeps adding duplicate content( the same database record over and over again). I just can't seem to get this to work. Any help would be much appreciated, thanks in advance!

好吧,总而言之,我在jquery移动设备中使用这个脚本。我在其中使用ajax从数据库中获取结果。我目前正在工作,但它不会自动刷新。我已经阅读了很多关于如何使用设置间隔功能的在线帖子,我试过了。但是,当我尝试它时,它可以工作,但它不断添加重复的内容(一遍又一遍的相同的数据库记录)。我似乎无法让这个工作。任何帮助将非常感谢,提前感谢!

Here is my code (*not I removed the setinterval function):

这是我的代码(*我没有删除setinterval函数):

 <script type="text/javascript">
$( document ).delegate("#member_home", "pagecreate", function() 
{ 
var member= new Array();
$.ajaxSetup({cache: false})
$.ajax({
url: '/scripts/alert_display.php',
data: "",
isajax: 1,
dataType: 'json',
success: function(data)
  {
    $.each(data, function(key, val) {

var friend = val['friend'];

$('#member_alerts').append(friend+"&nbsp;Wants to be your friend<input type='hidden' value='"+friend+"' id='hidden4' /><button type='submit' id='add'>Accept</button><br />");
                                                         });
                                                  }
                                           });

                                 })
                    </script>

Thank you so much for the help, so just to be clear, my code should now look like this?:

非常感谢你的帮助,所以为了清楚,我的代码现在应该是这样的吗?:

<script type="text/javascript">
$( document ).delegate("#member_home", "pagecreate", function() 
{ 
var refreshId = setInterval(function()
{
var member= new Array();
$.ajaxSetup({cache: false})
$.ajax({
url: '/scripts/friend_request_display.php',
data: "",
isajax: 1,
dataType: 'json',
success: function(data)
  {
    $.each(data, function(key, val) {

var friend = val['friend'];

$('#member_alerts').html(friend+"&nbsp;Wants to be your friend<input type='hidden' value='"+friend+"' id='hidden4' /><button type='submit' id='add'>Accept</button><br />");
                                                         });
                                                  }
                                           });
               }, 1000);
                                 })
                    </script>

3 个解决方案

#1

It keeps adding duplicate content because you're using the append function, which adds to the current DOM in the element. Use html instead (you may also need to create the div tags). See this SO question for more info.

它不断添加重复内容,因为您正在使用append函数,该函数会添加到元素中的当前DOM。改为使用html(您可能还需要创建div标签)。有关详细信息,请参阅此SO问题。

#2

if you use

如果你使用

$('#member_alerts').html(yourcontenthere);

Then that should solve your problem of duplicate content.

那么这应该可以解决重复内容的问题。

#3

If you are trying to do the refresh on an interval, you should put a setTimeout in the callback of your jquery ajax. This will allow the function to wait until after the request is complete to call the function again.

如果您尝试按间隔刷新,则应将setTimeout放在jquery ajax的回调中。这将允许函数等待,直到请求完成后再次调用该函数。

I would write the call into a separate function, then call it once when the page loads, and the recursively with setTimeout(myFunction,1000) every time the ajax request finishes. This will prevent you from having multiple requests to the server at the same time which could cause problems, as you would with setInterval.

我会将调用写入一个单独的函数,然后在页面加载时调用它一次,并在每次ajax请求完成时以setTimeout(myFunction,1000)递归调用。这将阻止您同时向服务器发出多个可能导致问题的请求,就像使用setInterval一样。

#1

#2