如何在不点击或提交的情况下实时更新数据

Question

我需要更新表中的数据，而不需要发送点击或提交操作。例如，当我更改输入值时，我想将这些更改实时保存在数据库中。

我的问题是，我如何比较表格是否有变化？ 我读了这篇文章，Submitting data without clicking a submit button，但在这里，该函数每 5 秒执行一次，我需要保存只是有更改。

HTML

 <form id="formos" method="">
 Status:<input type="text" class="form-control uppercase" form="">
 </form>

JS

$(window).bind('beforeunload', function(e){
    if($('#formos').serialize()!=$('#formos').data('serialize'))return true;
    else e=null; // i.e; if form state change show box not.
});

Answer 1

我的做法是这样的。我在击键时通过 ajax 发送数据。但我这样做的超时时间为 300 毫秒，这样只有在他们停止输入时它才会在每次击键时发送。

然后我在服务器端检查是否有更改，如果没有，我什么也不做，如果已经有我更新的条目，如果没有我插入的条目。很简单。

如果您在使用代码时遇到问题，我可以提供一些。

HTML：

<input type="text" id="test_1" />
<input type="text" id="test_2" />

JS：

$(function(){
    $('input[type=text]').keyup(function(){
        var elem = $(this);
        clearTimeout($(this).data('timer'));
        $(this).data('timer', setTimeout(function(){
            sendValue(elem.attr('id'), elem.val());
        }, 300));
    });
    $('input[type=text]').change(function(){
        sendValue($(this).attr('id'), $(this).val());
    });
});

function sendValue(key, value) {
    $.post('path/to/script.php', {key: key, value: value}, function(data, result){
        if(result == 'success') {
            console.log('Data was sent');
        } else {
            console.log('AJAX post failed');
        }
    });
}

PHP：

$key = $_POST['key']; //just remember never to just receive input from a user, first check if it is something valid and not something trying to hack you
$value = $_POST['value'];
//then check if there is a difference of value to what you had
//insert or update in your db accordingly
die(); //die if you are using a controller within a framework, if you do not it will send back all the other stuff with it

我希望这会有所帮助。

Answer 2

假设一旦字段失去焦点并且您使用文本字段就足以更新，您可以使用以下内容

$(document).on("blur", input, function() {
  var changedValue = $(this).val();
  // Store changedValue in database using Ajax
});

Answer 3

一个非常简单的方法是：

$(document).ready(function(){
    setInterval(function(){
        $('#content').load('data.php');
    }, 5000);
});

基本上，网页会每隔 5 秒从特定的“data.php”脚本中提取一个请求并将其加载到#content相应的元素。

在您的 data.php 页面上，您将有一个脚本，类似于：

$result = mysqli_query($conn, "SELECT * FROM table WHERE something = 'something'");
while($row = mysqli_fetch_assoc($result)){
    $output = $row['yourrow'];
    echo $output . <br>;
}

在您的 HTML 中：

<div id="content">
 <!-- inside here is where the output code from the data.php
 page would be displayed. !-->
</div>

当然，您可以将 #content 替换为您正在使用的元素的实际 ID，同时根据您的需要定制所有其他代码。