如何仅根据服务响应更新javascript中的单个元素

我想更新一行中的一个值，我不想使用OnReload，因为这会上载整个脚本，这取决于计时器例如：每隔5秒重新加载一次。。。这不是我想要的。除非有什么现代的东西我可以用来做这个。 不确定，什么会触发此更新以及如何生成此脚本？ 例如：如果item.updatelabel.value与服务响应不同，则使用新值更新item.updatelabel

<script>
        fetch("http:myservice").then(res => res.json()).then(serviceResponse => {
            let newdoc = '';
            for (const item of serviceResponse) {
                newdoc += `
                    <div class="1">
                       <p id="name" class="title-text  ">${item.id}</p>
                      <h2 id="id" class="updatelabel-text">${item.updatelabel}</h2>(** This is the only thing to update)
                      <p class="small-text ">some fancy text</p>
                     </div>
                `
            }
            document.querySelector('.myclass').innerHTML = newdoc;
        })
    </script>

---

我需要更多的信息来回答你的问题

如果item.updatelabel.value从serivce响应获取渲染数据，它会有什么不同

您写入了如果item.updatelabel.value与服务响应不同，则更新item。它似乎是一个项目数组，呈现的值是一个字符串。那么，您是想说在API调用后是否有任何项被更改以再次调用API，还是您有硬编码项并希望从API调用中更新它们

---

当你说更新该项时，你是指发出另一个API请求还是更改应用程序页面的状态

在特定的时间间隔内调用ajax，并在ajax的回调中替换文本

function fetchdata(){
 $.ajax({
  url: 'fetch.php',
  type: 'post',
  success: function(response){
   // Perform operation on the return value
    if($conditionsatisfy){
            document.querySelector('.myclass').innerHTML = newdoc;

  }
 });
}

$(document).ready(function(){
 setInterval(fetchdata,5000);
});

---

因此，现在我正确地理解了你，你可以有一些上述情况，并继续打电话。我认为最好的解决方案是Web套接字。

使用WebSocket，您可以在客户端和服务器之间建立实时连接。签出使使用它变得容易。与新闻提要或Instagram一样，该页面将根据要求进行更新和运行。它将更新项目。实时，无需重新加载

此外，通过API reuqest，您可以大大提高ES7的可读性

 const getData = async () => {
    //fetching data 
    let data = await fetch("https://jsonplaceholder.typicode.com/todos/1")
    //converting to json 
    let json = await data.json()
    console.log(json)

    let serviceResponse = json
     //do logic or return data here
 }

  getData()

---

如果没有jquery。你可以试试这个，因为没有合适的触发器。当页面加载完成时，它将如何使用jquery？如何每隔一段时间进行提取？是阿贾克斯吗？@zod。还没有，但我愿意接受各种想法。我所拥有的只是你在我的代码片段上看到的东西。谢谢。正是这样。我将不得不去刷新，以始终获得新的数据。但是如果我使用onload，它将每2秒刷新一次脚本，并且它将始终闪烁。这就是为什么我想尝试-1进行另一次调用-获取数据2仅刷新updatelabel，以便在第二次调用后，不要更新脚本中的所有内容，只更新行。我明白了。WebSockets是令人讨厌的。但我需要更新的只是${item.updatelabel}**这是唯一需要更新的内容。感谢您的回复。请为类提供动态id或类似于class=updatelabel-text-I的id，以识别并使用替换。htmlI能够使用您的逻辑。谢谢我没有使用ajax，因为它只能在JS中完成。但是这个主意非常适合我的需要。谢谢