Question

我在python上写了一个小计算器，使用了flask框架。我在模板中创建了表单，在其中我使用Javascript收集特定数据并使用.getJSON，我实现了工作ajax。这是代码。（也使用jQuery）

$(document).ready(function() {

$(function() {
    $('.btn#population').bind('click', function() {//Only one button.
        $( ".faction" ).each(function(x) {//Loops through many forms, which all are class .faction
            var totals =  [];//For late r use. Store gathered data.
            $.getJSON('/_population', {//Parse data to python.
                faction: $(this).attr('id'),
                houses: $(this).find('input[name="houses"]').val(),
                level: $(this).find(':radio:checked').val(),
                space: $(this).find('.space').prop( "checked" ),
                senate: $(this).find('.senate').prop( "checked" )
            },
            function(data) {//Receive data. give it to next functions.
                $.merge(totals, data.result);
                /*$.each(data, function(i, item){
                    item.forEach(function(number){
                        //console.log(number);
                        totals.push(number);
                    });
                }); This is commented, due experiments.*/
            });
            console.log(totals);
            $(this).find('input[name="total"]').each(function(i,val) {//Search for fields in forms, wich will store resoults. (Doesn't used for data gathering in this global function.)
                $(this).val();//Here I'll itter througt totals and change values of inputs.
            });
        });
    return false;
    });
});

});

表单由各种输入组成，但并不重要。 /_population路由有python脚本，它返回基本的json数组，只包含数字，通常为3或4，如[0,0,0,0]或[120,140,300]。

我的目标是将每个返回数组的项放在模板中的输入字段中。正如您在代码中看到的那样，它循环遍历许多表单，并且返回的数组项将转到其中一些表单。就目前而言，我陷入了困境，控制台向我展示了非常奇怪的行为，有时它会产生正确的数组，有时则不然。

这是Firefox控制台输出的示例。

Array [  ] functions.js:23
Array [  ] functions.js:23
Array [  ] functions.js:23
Array [ 40, 120, 300, 0 ] functions.js:23
Array [ 72, 540, 0, 0 ] functions.js:23
Array [ 30, 210, 100 ] functions.js:23
Array [  ] functions.js:23
Array [  ] functions.js:23
Array [  ] functions.js:23
Array [ 40, 120, 300, 0 ] functions.js:23
Array [ 72, 540, 0, 0 ] functions.js:23
Array [ 30, 210, 100 ] functions.js:23

（随机方式不规则。）

会出现什么问题，为什么会如此以及如何解决？

Answer 1

您可以将所有ajax调用存储在一个数组中，并使用$ .when在完成所有操作后获取回调，然后迭代元素并设置值。

很难对此进行测试，但接近这一点应该有用。

$(function() {
    $('#population').on('click', function(e) {
        e.preventDefault();
        var xhr = [];
        $( ".faction" ).each(function(i, el) {
            xhr.push(
                $.getJSON('/_population', {
                    faction : el.id,
                    houses  : $(el).find('input[name="houses"]').val(),
                    level   : $(el).find(':radio:checked').val(),
                    space   : $(el).find('.space').is( ":checked" ),
                    senate  : $(el).find('.senate').is( ":checked" )
                })
            );
        });

        $.when.apply(undefined, xhr).done(function() {
            var arg = [].slice.call(arguments);
            $(this).find('input[name="total"]').val(function(i,val) {
                return arg[i].responseText;
            });                                         
        });
    });
});

Answer 2

对不起，但是因为它总是发生在我身上，我觉得很容易解决问题。正如@lan提到的那样，getJSON是异步的，我想，然后我应该做所有的功能，而我有反应，而不是在我得到它之后。这是我修改后的脚本。评论包括。

$(document).ready(function() {

$(function() {
    $('.btn#population').bind('click', function() {
        $( ".faction" ).each(function(x) {
            //Here will answers be shown.
            var answers = $(this).find('input[name="total"]');
            $.getJSON('/_population', {
                faction: $(this).attr('id'),
                houses: $(this).find('input[name="houses"]').val(),
                level: $(this).find(':radio:checked').val(),
                space: $(this).find('.space').prop( "checked" ),
                senate: $(this).find('.senate').prop( "checked" )
            },
            function(data) {
                //Gathered data is stored directly in response function.
                var totals = [];
                //I guess ,can be done by merge too, but for now, I'll leave it like that.
                $.each(data, function(i, item){
                    item.forEach(function(number){
                        totals.push(number);
                    });
                });
                //Here previously gathered answer input fields are used for purpose.
                answers.each(function(y,val) {
                    $(this).val(totals[y]);
                });
            });
        });
    return false;
    });
});

});

通过ajax数据进行迭代是时不时的

2 个答案: