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

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

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

Answer 2

我这样做是这样的。我在击键时通过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 3

这样做的一种非常简单的方法是：

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

基本上，会发生什么情况是网页会每隔 5 秒从特定的“ data.php ”脚本中提取请求并将其加载到{{1相应的元素。

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

#content

在你的HTML中：

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

当然，您将<div id="content">  </div>替换为您正在使用的元素的实际ID，并根据您的需要定制所有其他代码。

如何实时更新DATA而无需点击或提交

3 个答案: