如何自动更新输出

Question

如果我在不刷新页面的情况下更改数据库表中的values 或再次单击button 以执行脚本，任何人都可以帮助我如何自动更新textbox 中的输出内容。

当前脚本：

<script>
$(document).ready(function(){
    $('#send_search_form').click(function(event){

            event.preventDefault();
            $(".search_form_input").val('');
            $(".empty_batchcode").html("Doesn't exist!");

         $.ajax({
            url:"search.php",
            type:"GET",
            data: { term : $('#query').val() },
            dataType:"JSON",
            success: function(result) {

            var ii = 1;

            for (var i = 0; i < result.length; i++) { 
                        $('#funiq_id').html(result[i].value).show();
                        $('#t_region').val(result[i].region).show();
                        $('#t_town').val(result[i].town).show();
                        $('#t_uniq_id').val(result[i].uniq_id).show();
                        $('#t_position').val(result[i].position).show();
                        $('#t_salary_grade').val(result[i].salary_grade).show();
                        $('#t_salary').val(result[i].salary).show();
                        $('#id'+ii+'').val(result[i].atid).show();
                        $('#aic'+ii+'').val(result[i].atic).show();
                        $('#name'+ii+'').val(result[i].atname).show();
                        $('#other_qual'+ii+'').val(result[i].other_sum).show();
                        $('#interview'+ii+'').val(result[i].interview_sum).show();
                ii++;
                }

            }

        });

    });
});      
</script>

Answer 1

将 ajax 调用放在一个单独的函数中。然后调用setInterval就可以了

<script>
$(document).ready(function(){
var timer ;
$('#send_search_form').click(function(event){
        event.preventDefault();
        $(".search_form_input").val('');
        $(".empty_batchcode").html("Doesn't exist!");
        clearInterval(timer);
        updateTextboxes();

});

function updateTextboxes(){
          $.ajax({
        url:"search.php",
        type:"GET",
        data: { term : $('#query').val() },
        dataType:"JSON",
        success: function(result) {

        var ii = 1;

        for (var i = 0; i < result.length; i++) { 
                    $('#funiq_id').html(result[i].value).show();
                    $('#t_region').val(result[i].region).show();
                    $('#t_town').val(result[i].town).show();
                    $('#t_uniq_id').val(result[i].uniq_id).show();
                    $('#t_position').val(result[i].position).show();
                    $('#t_salary_grade').val(result[i].salary_grade).show();
                    $('#t_salary').val(result[i].salary).show();
                    $('#id'+ii+'').val(result[i].atid).show();
                    $('#aic'+ii+'').val(result[i].atic).show();
                    $('#name'+ii+'').val(result[i].atname).show();
                    $('#other_qual'+ii+'').val(result[i].other_sum).show();
                    $('#interview'+ii+'').val(result[i].interview_sum).show();
            ii++;
            }


        if(timer == 1){ // if timer has been cleared

            timer = setInterval(updateTextboxes,1000); // <-- change 1000 to the value you want
        }

        }


    });


}
timer = setInterval(updateTextboxes,1000);
});      
 </script>

Answer 2

您正在寻找绑定 html 和数据模型的 MVVM 模式。

有一些库可以帮助您解决这个问题

• http://knockoutjs.com/
• http://angularjs.org/

http://www.faridesign.net/2012/04/20-javascript-frameworks-mvvm-templating-licenses-etc/

我建议你从 youtube 开始，https://www.youtube.com/watch?v=F233-PRVcW8

如果你想深入兔子洞，还有 websockets，但它们又会依赖 mvvm。在你的情况下，这将是一个替代 http://socketo.me/

Answer 3

试试这个。将所有 ajax 内容放入一个函数中，并在需要时调用它。如果你有很多模板要做，我建议使用 knockout.js 或 angular.js，它会让事情变得更容易。

<script>
$(document).ready(function(){
    $('#send_search_form').click(function(event){
        event.preventDefault();
        refresh();
    });
    $(".search_form_input").on('keyup',function(){
        refresh();
    });
});     

function refresh(){
    $(".empty_batchcode").html("Doesn't exist!");
    $.ajax({
        url:"search.php",
        type:"GET",
        data: { term : $('#query').val() },
        dataType:"JSON",
        success: function(result) {

        var ii = 1;

        for (var i = 0; i < result.length; i++) { 
                    $('#funiq_id').html(result[i].value).show();
                    $('#t_region').val(result[i].region).show();
                    $('#t_town').val(result[i].town).show();
                    $('#t_uniq_id').val(result[i].uniq_id).show();
                    $('#t_position').val(result[i].position).show();
                    $('#t_salary_grade').val(result[i].salary_grade).show();
                    $('#t_salary').val(result[i].salary).show();
                    $('#id'+ii+'').val(result[i].atid).show();
                    $('#aic'+ii+'').val(result[i].atic).show();
                    $('#name'+ii+'').val(result[i].atname).show();
                    $('#other_qual'+ii+'').val(result[i].other_sum).show();
                    $('#interview'+ii+'').val(result[i].interview_sum).show();
            ii++;
            }

        }

    });
} 
</script>