Question

我正在使用getjson在页面上显示记录。基本上我想在网页上只显示已加载记录的新添加记录。我使用了set interval选项，它的工作正常，问题是当设置间隔调用时，它会追加显示重复的所有记录。请让我知道如何处理这种重复。

 function updates() {
var url="http://192.168.0.102/newsget.php";

$.getJSON(url,function(json){


// loop through the members here
$.each(json.members,function(i,dat){
$("body").append(

'<div data-role="page" id="'+dat.pagename+'" data-title="'+dat.pagename+'">'+
        '<div data-role="header">'+
            '<h1>'+dat.post_title+'</h1>'+
            '<a data-role="button" href="#news" data-transition="flip" data-icon="arrow-l" data-corners="false">Back</a>'+
        '</div>'+
        '<div data-role="content">'+

            '<img src="http://192.168.0.102/uploads/'+dat.imageurl+'" alt="'+dat.post_title+'" />'+

            '<p>'+dat.description+'</p>'+

        '</div>'+
        '<div data-role="footer">'+
            '<h2>Copyrights All rights Reserved by ABC</h2>'+
            '<p class="copyright">&copy; Copyright 2015</p>'+
        '</div>'+
    '</div>'




    );
   setTimeout(updates, 2000);

   });




   $.each(json.members,function(i,dat){
   $("#grid").append(

   '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="portfolio-item ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-btn-up-c ui-corner-none"><div class="ui-btn-inner ui-li ui-li-has-alt">'+
                    '<div class="ui-btn-text">'+
                        '<a href="#'+dat.pagename+'" class="ui-link-inherit ui-corner-none">'+
                            '<img src="http://192.168.0.102/uploads/'+dat.imageurl+'" class="ui-li-thumb ui-corner-none">'+
                            '<h3 class="ui-li-heading">'+dat.post_title+'</h3>'+
                            '<p class="ui-li-desc">'+dat.post_content+'</p>'+
                        '</a>'+
                    '</div>'+
                '</div>'+
                '<a href="#portfolio1" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c">'+
     '<span class="ui-btn-inner"><span class="ui-btn-text">'+
     '</span>'+
     '<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-r" data-iconpos="notext" data-theme="b" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></span></span></span></a>'+



                '</li>'




        );


       });


       })
      .done(function() {
      //alert( "second success" );
      })
      .fail(function() {
      alert( "Check your net connection or server is down due to some maintence" );
      });

      }

     });

Answer 1

假设预先加载的div已经分配了像新生成的id那样的id，在$（＆＃34; body＆＃34;）。append part之前你可以放一个if条件来检查当前div是否是已经存在。像这样：

function updates() {
  var url="http://192.168.0.102/newsget.php";

  $.getJSON(url,function(json){

  // loop through the members here
  $.each(json.members,function(i,dat){
    if ($("#"+dat.pagename).length === 0) { // New if condition!
      $("body").append(...

有点快，但我希望它有所帮助。

PS：我建议您正确缩进代码！

Answer 2

// My Model
var Model = {

    url: 'your/url/here.php',

    content: [{
        id: 9087,
        foo: 'foo'
    }, {
        id: 9088,
        foo: 'foo'
    }],

    getNewData: function () {
        $.getJSON(this.url, this.addNewRecords);
    },

    addNewRecords: function (arr) {
        // important to distinguish JSON from JSOL
        var i = 0;

        for (i; i < arr.length; i += 1) {
            if (!this.keyValueInModel('id', arr[i].id)) {
                Model.content.push(arr[i]);  // push the record into your model
                myView.render([arr[i]]); // render the record to the view
            }
        }

    },

    keyValueInModel: function (key, val) {
        var i = 0,
            result = false,
            arr = Model.content;

        for (i; i < arr.length; i += 1) {
            if (arr[i][key] === val) {
                return true;
            }
        }

        return false;
    }
};


// My View
var myView = {

    context: null, // +1 if you figure out why you should context your view to a specific node, and actually do it. I figure I will leave you some room to learn....



    render: function (records) {

        var i = 0,
            dat;

        for (i; i < records.length; i += 1) {
            dat = records[i];

            $("body").append(

                '<div data-role="page" id="' + dat.pagename + '" data-title="' + dat.pagename + '">' +
                '<div data-role="header">' +
                '<h1>' + dat.post_title + '</h1>' +
                '<a data-role="button" href="#news" data-transition="flip" data-icon="arrow-l" data-corners="false">Back</a>' +
                '</div>' +
                '<div data-role="content">' +

                '<img src="http://192.168.0.102/uploads/' + dat.imageurl + '" alt="' + dat.post_title + '" />' +

                '<p>' + dat.description + '</p>' +

                '</div>' +
                '<div data-role="footer">' +
                '<h2>Copyrights All rights Reserved by ABC</h2>' +
                '<p class="copyright">&copy; Copyright 2015</p>' +
                '</div>' +
                '</div>');

        }

        $("#grid").append(

            '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="portfolio-item ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-first-child ui-btn-up-c ui-corner-none"><div class="ui-btn-inner ui-li ui-li-has-alt">' +
            '<div class="ui-btn-text">' +
            '<a href="#' + dat.pagename + '" class="ui-link-inherit ui-corner-none">' +
            '<img src="http://192.168.0.102/uploads/' + dat.imageurl + '" class="ui-li-thumb ui-corner-none">' +
            '<h3 class="ui-li-heading">' + dat.post_title + '</h3>' +
            '<p class="ui-li-desc">' + dat.post_content + '</p>' +
            '</a>' +
            '</div>' +
            '</div>' +
            '<a href="#portfolio1" title="Purchase album" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext" data-theme="c">' +
            '<span class="ui-btn-inner"><span class="ui-btn-text">' +
            '</span>' +
            '<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="arrow-r" data-iconpos="notext" data-theme="b" title="" class="ui-btn ui-btn-up-d ui-shadow ui-btn-corner-all ui-btn-icon-notext"><span class="ui-btn-inner"><span class="ui-btn-text"></span><span class="ui-icon ui-icon-arrow-r ui-icon-shadow">&nbsp;</span></span></span></span></a>' +



            '</li>'




        );
    }
};

setTimeout(Model.getNewData, 2000);

在网页上附加已加载记录的新记录

2 个答案: