如何在不刷新页面的情况下从数据库字段更新页面上的文本?

时间:2014-07-15 16:57:51

标签: php jquery mysql ajax

我甚至不知道从哪里开始。可能是php,mysql,jquery和ajax的组合?

如果第1人打开了一个页面并且正在查看数据库中的值,并且另一台计算机上的人2编辑了人1当前正在查看的记录,那么这些值是否可以在人1的屏幕上更新而没有人1具有刷新?

我该怎么做呢?是否有一个非常小的例子可以提供一个字段,然后我可以将例子复制到更多的字段?

不确定这是否有用,但我将字段保存到数据库的方式是即时的,没有刷新,所以我想以某种方式添加到下面这个并获取值在任何人的屏幕上自动更新当任何计算机上的任何人在数据库中更改值时,页面将打开。

提前感谢。

<script type="text/javascript">
$(document).ready(function(){

$('td.edit').click(function(){                  
    $('.ajax').html($('.ajax input').val());
    $('.ajax').removeClass('ajax');
    $(this).addClass('ajax');
    $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');
    $('#editbox').focus();
});

$('td.edit').keydown(function(event){
    arr = $(this).attr('class').split( " " );
    if(event.which == 13) {
        $('table tbody tr').removeClass('footable-detail-show'); //collapse expanded row part1
        $('.footable-row-detail').hide(); //collapse expanded row part2
        $.ajax({
            type: "POST",
            url:"ajax-table-update.php",
            data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
            success: function(data){
                $('.ajax').html($('.ajax input').val());
                $('.ajax').removeClass('ajax');
                $('#filter').focus();
            }
        });
    }
});

$(document).on('blur','#editbox', function(){
    $('table tbody tr').removeClass('footable-detail-show'); //collapse expanded row part1
    $('.footable-row-detail').hide(); //collapse expanded row part2
    $.ajax({
            type: "POST",
            url:"ajax-table-update.php",
            data: "value="+$('.ajax input').val()+"&rownum="+arr[2]+"&field="+arr[1],
            success: function(data){
                $('.ajax').html($('.ajax input').val());
                $('.ajax').removeClass('ajax');
                $('#filter').focus();
            }
        });
});

});
</script>

1 个答案:

答案 0 :(得分:2)

我会这样做的方式。从data.php中获取数据库中的文件。然后每8秒从index.php对该php文件进行一次ajax调用。

的index.php

<html>
<head>
<script>
    $(document).ready(function(){
  refreshdata();
});

function refreshdata(){
    $('#data').load('data.php', function(){
       setTimeout(refreshdata, 5000);
    });
}
</script>
</head>
<body>
<div id="data"></div>
</body>
</html>

data.php

<?php
//Connect to your database here or w/e

//Output here
echo $outputdata;
?> 

我从周围抓住它并修改它。它应该都可以工作