Fatal编程技术网
  • javascript/
  • Javascript 在网页上附加已加载记录的新记录

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

javascript php jquery jquery-mobile

Javascript 在网页上附加已加载记录的新记录,javascript,php,jquery,jquery-mobile,Javascript,Php,Jquery,Jquery Mobile,我使用getjson在页面上显示记录。基本上，我只想显示新添加的记录与已加载的网页记录。我使用了set interval选项，它工作正常。问题是，当set interval调用它时，它会追加所有显示重复的记录。请让我知道如何处理此复制 function updates() { var url="http://192.168.0.102/newsget.php"; $.getJSON(url,function(json){ // loop through the members here

我使用getjson在页面上显示记录。基本上，我只想显示新添加的记录与已加载的网页记录。我使用了set interval选项，它工作正常。问题是，当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" );
      });

      }

     });
假设预加载的div与新生成的div一样分配了id，那么在$body.append部分之前，您可以设置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：我建议你适当地缩进你的代码

据我所知，你没有模特儿。看起来您每n秒检查一次数据，并希望使用新数据更新视图。创建一个模型，并将其用作视图中内容的上下文，您觉得舒服吗？总之，为您的模型创建一个看起来像数组的变量。然后，来自getJSON函数的回调应该指向更新模型的函数。然后在更新模型后，可以再次渲染内容。分离代码以呈现您的视图，只需担心呈现模型数据，我个人会使用Handlebar或一些JST，而不是字符串串联。基本上，我正在创建jquery移动应用程序。在我的应用程序有新闻部分，我从基于php的管理面板添加新闻，除了用户已经打开该新闻页面时的唯一问题外，其他一切都很好，当时我又添加了一条新闻，所以我想在用户移动设备上自动显示该新闻，而不刷新页面。我希望你能理解，所以如果你有什么好的东西或建议或代码，请与我分享。如果你需要更多的澄清，请让我知道。我也会用你的密码是的，我明白了。老实说，我会使用web套接字来实现这一点。你有时间的时候可以调查一下。不管怎么说，您正在尝试的是所谓的长轮询，我的答案对此很有效，因为它只会向页面添加新记录。您只需要使用Ajax并轮询您的服务器您的setTimeout，然后将响应发送到Model.getNewDataCharlie我也需要您的帮助，您能否告诉我如何保护.apk文件，或者如何隐藏或加密页面上的javascript代码。我用的是科尔多瓦 
// 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);