时间戳

首页 > 解决方案 > 如何通过从 jQuery 中的 API 获取数据来自动在表单中的输入字段上设置值

html - 如何通过从 jQuery 中的 API 获取数据来自动在表单中的输入字段上设置值

问题描述

我的任务是从数据库 (API) 获取数据并自动在输入表单中设置该值，而无需刷新页面。

我能够通过 API 从数据库中获取数据，并能够将值设置为输入表单。它在我刷新页面时起作用。但是当数据库中记录了新行时，它无法自动设置该值，而是在再次重新加载页面后使用新值。

$.get("http://127.0.0.1:8000/api/get-volume-data", function (data) {
      data = JSON.parse(data);
      $('#volume_data').val(data.volume_data);
  });
   
<div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <label for="volume_data"> Data</label>
                    <input type="text" class="form-control" name="volume_data" id="volume_data" placeholder="Enter Data">
                </div>
            </div>
        </div>

标签： htmljquerylaravelapi

解决方案

你需要一个 websocket 来实时更新。但对于短期解决方案，您可以稍后再将请求发送到 API。

function getData() {
  $.get("http://127.0.0.1:8000/api/get-volume-data", function (data) {
      data = JSON.parse(data);
      $('#volume_data').val(data.volume_data);
  });
}
getData(); // first call

setInterval(getData(),3000); // call again per 3 seconds

推荐阅读