如何在JSON更新时不刷新页面更新Div的类与内容？

Absolutely! You can ditch the full page reload and its annoying flicker entirely by updating only the relevant DOM elements directly. Here's how to refactor your code for smooth, non-intrusive updates tailored to your大屏 monitoring scenario:

Key Improvements & Refactored Code #

Instead of reloading the whole page when data changes, we'll compare the new JSON data with the previous version, then update only the .env elements that need changes. We'll also handle dynamic instance counts (adding/removing elements if your JSON's instances list grows or shrinks) and clean up old styling classes to avoid conflicts.

// Store previous data to detect changes
let previousData = null;

// Set up your interval to check for updates
setInterval(function() {
  // Use jQuery's getJSON (or swap in fetch if you prefer no jQuery)
  $.getJSON("sampledatabase.json", function(newData) {
    // Check if data has changed (simple string comparison works for most cases)
    const dataChanged = !previousData || JSON.stringify(newData) !== JSON.stringify(previousData);
    
    if (dataChanged) {
      console.log('Data updated — refreshing elements');
      updateEnvDisplay(newData);
      previousData = newData;
    }
  });
}, 1200);

// Function to handle all .env element updates
function updateEnvDisplay(data) {
  const envElements = document.getElementsByClassName("env");
  const instances = data.instances;

  // Update existing elements or create new ones for new instances
  for (let i = 0; i < instances.length; i++) {
    const instance = instances[i];
    let element = envElements[i];

    if (element) {
      // Clean up old status classes first to avoid duplication
      element.classList.remove("passed", "notPassed");
      // Add new status class
      element.classList.add(instance.status === "UP" ? "passed" : "notPassed");
      // Update content
      element.innerHTML = `<span class="originalsize">${instance.id}</span><br>${instance.time}`;
    } else {
      // Create new element for a new instance (append to your container of choice)
      const newElement = document.createElement("div");
      newElement.className = "env";
      newElement.classList.add(instance.status === "UP" ? "passed" : "notPassed");
      newElement.innerHTML = `<span class="originalsize">${instance.id}</span><br>${instance.time}`;
      document.getElementById("env-container").appendChild(newElement); // Replace with your actual container ID
    }
  }

  // Remove extra elements if instances were removed from the JSON
  for (let i = instances.length; i < envElements.length; i++) {
    envElements[i].remove();
  }
}

Optional Performance Tweak #

If you want to optimize further (especially for large datasets), you can avoid unnecessary DOM updates by tracking which fields actually changed. Add data attributes to your .env elements to store the last known values, then only update when those values differ:

// Inside the update loop for existing elements:
const lastStatus = element.dataset.lastStatus;
const lastId = element.dataset.lastId;
const lastTime = element.dataset.lastTime;

if (instance.status !== lastStatus || instance.id !== lastId || instance.time !== lastTime) {
  // Only run the update logic if something changed
  element.classList.remove("passed", "notPassed");
  element.classList.add(instance.status === "UP" ? "passed" : "notPassed");
  element.innerHTML = `<span class="originalsize">${instance.id}</span><br>${instance.time}`;
  
  // Update data attributes for next comparison
  element.dataset.lastStatus = instance.status;
  element.dataset.lastId = instance.id;
  element.dataset.lastTime = instance.time;
}

This ensures you're only touching the DOM when absolutely necessary, making updates even smoother for your monitoring screen.

内容的提问来源于stack exchange，提问作者Ondrej Lulei