Div-Inhalt automatisch aktualisieren

So habe ich eine HTML-Seite, die mehrere Felder anzeigt. Diese Boxen haben Daten, die ich von einer JSON (URL-Datei) laden. JSon ändert sich alle 2 Minuten und daher muss ich die Daten aktualisieren, aber ich möchte nicht die gesamte Seite aktualisieren. Ich habe versucht mit Ajax und Jquery, aber es war zu verwirrend. Jemand hat mir gesagt, dass ich es mit dem AngularJS $ http-Dienst machen kann. Wenn ja, kann mir jemand ein Beispiel zeigen, wie es geht?Div-Inhalt automatisch aktualisieren

Das ist, was ich bisher habe:

Das ist mein 'index.html'

ist

<html ng-app="myApp"> 

    <head>   
    <title>My data page</title>  
    <script data-require="[email protected]*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0- beta.6/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 

     <div class ="squareBox" ng-repeat="app in myArray"> 
      <p>{{app.name}} </p> 
      <!--Some more data here --> 
      This entire div tag needs to be refreshed every 2 minutes 
     </div> 
    </body>

Das ist mein 'script.js' Datei

angular.module('myApp', []); 
angular.module('myApp').controller('myCtrl', ['$scope', '$http', function ($scope, $http) { 

    $http({ 
     method: 'GET', 
     url: '/MyWebApp/JsonData' 

    }).then(function successCallback(response) { 
     console.log("Success yay!"); 
     console.log(response); 
     $scope.myArray = response.data; 

    }, function errorCallback(response) { 
     console.log("Oops in error!"); 
    }); 
}]);

Wieder was Ich möchte den Div-Inhalt alle 3 Minuten automatisch aktualisieren. Wenn also die JSON-Datei geändert wird, sollte myArray Daten aktualisiert haben, die dann in den Feldern angezeigt werden sollten. Vielen Dank im Voraus :)

Quelle

2016-04-28 Parth Bhoiwala

Hier ist die Lösung ohne jQuery zu verwenden. Versuchen Sie, das DOM nicht mit jQuery zu verwirren; es ist nicht der eckige Weg.

angular.module('app', []).controller("MainCtrl", ["$scope", "$http","$interval", 
    function($scope, $http, $interval) { 
     //store your data 
     $scope.myArray = []; 

     //store the interval promise in a variable 
     var promise; 

     //stops the interval 
     function stop() { 
       $interval.cancel(promise); 
      } 

     //starts the interval 
     function start() { 
      //stops any running intervals to avoid two intervals running at the same time 
      stop(); 
      //kick off the interval and store it in the promise 
      promise = $interval(refreshItems, 180000); //3 minutes in millisecs = 180000 
     } 

     //this function is used to get your data 
     function refreshItems() { 
      $http.get('MyWebApp/JsonData').then(function(data, 
       status, header, config) { 
       $scope.myArray = data; 
      }, function(data, status, header, config) { 
       //an error occurred 
      }); 
     } 

     //function to kick off when the page renders 
     function init() { 
      start(); 
      //do other things here 
     } 

     //kick off the page when the controller is fully loaded 
     init(); 
    } 
]);

Quelle

2016-04-28 15:13:48 Kyle

können Sie die setInterval() verwenden, um die Ajax-Anforderung alle 3 Minuten zu machen:

$(document).ready(function() { 
    setInterval(function(){ updateDiv(); }, 10000); // this example is for each 10 seconds. change as you need 
}); 

function updateDiv(){ 
    getJSONByAJAX(); 
} 

function getJSONByAJAX(){ 
// request ajax 
    $.ajax({ 
     type : 'post', 
     url : 'yourPageThatSendJSON.php', 
     dataType: 'json', 
     success : function(data){ 
      setContentOnDiv(data); 
     } 
    }); 
} 

function setContentOnDiv(data){ 
    $('div.squareBox').html(data); 
}

Quelle

2016-04-28 14:56:35

Div-Inhalt automatisch aktualisieren

Antwort

Verwandte Themen