Question

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

当前脚本：

<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和datamodel的MVVM模式。

有一些图书馆可以帮助您解决这个问题。

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

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

如果你想深入兔子洞，那里还有网页框，但他们依次会依赖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>

如何自动更新输出

3 个答案: