Question

我在文本输入中输入数据时运行此代码：

$("input#search").live("keyup", function(e) {       
        var search_string = $(this).val();
        var i = 0;
        var trHTML = '';
        if(search_string !== '') {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/section/search_go",
                data: { query: search_string },
                cache: false,
                success: function(response) {
                    $.each(response, function(i, item) {


                        trHTML += '<tr>';
                        trHTML += '<td>' + item.accountnumber + '</td>';
                        trHTML += '<td>' + item.company + '</td>';
                        trHTML += '<td>' + item.phone + '</td>';
                        trHTML += '<td>' + item.postcode + '</td>';
                        trHTML += '</tr>';
                    });
                    $('#customers').html(trHTML);
                }
            });
            console.log(i);
        }

        /*if(counter === 0 || search_string == '') {
            $('#customers').html('<tr><td colspan="4">No Results</td></tr>');
        }*/
    });

我正在尝试获取$.each循环中的记录数，但我似乎无法做到这一点。

我已尝试使用功能中的i，我也尝试添加counter变量，并为每个循环添加了counter++但仍然无效

Answer 1

我希望如果你需要多次循环运行，

只需response.length。两者都是一样的。

$("input#search").live("keyup", function(e) {       
        var search_string = $(this).val();
        var resultLength;   //Declare variable
        var i = 0;
        var trHTML = '';
        if(search_string !== '') {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/section/search_go",
                data: { query: search_string },
                cache: false,
                success: function(response) {
                    resultLength = response.length;  //assign the length
                    $.each(response, function(i, item) {


                        trHTML += '<tr>';
                        trHTML += '<td>' + item.accountnumber + '</td>';
                        trHTML += '<td>' + item.company + '</td>';
                        trHTML += '<td>' + item.phone + '</td>';
                        trHTML += '<td>' + item.postcode + '</td>';
                        trHTML += '</tr>';
                    });
                    $('#customers').html(trHTML);
                }
            });
            console.log(i);
        }

        /*if(resultLength === 0 || search_string == '') {  //access here
            $('#customers').html('<tr><td colspan="4">No Results</td></tr>');
        }*/
    });

Answer 2

console.log（i）必须在每个函数内部。

success: function(response) {
                $.each(response, function(i, item) {


                    trHTML += '<tr>';
                    trHTML += '<td>' + item.accountnumber + '</td>';
                    trHTML += '<td>' + item.company + '</td>';
                    trHTML += '<td>' + item.phone + '</td>';
                    trHTML += '<td>' + item.postcode + '</td>';
                    trHTML += '</tr>';
                    console.log(i);  // this "i" from here function(i, item)
                });

Answer 3

您的方法的主要问题是$.ajax()调用异步 [1]。这是Web开发中非常重要的一部分：AJAX请求（以及一般的HTTP请求）可能需要很长时间（偶尔大约30秒或更长），如果您的JavaScript代码被阻止等待它完成，整个浏览器将锁定。（有关详细信息，请参阅链接的MDN文章文章。）

这对您来说意味着依赖于$.ajax()请求的结果的任何代码必须从success回调函数中触发，该函数在运行时运行HTTP请求成功返回数据。

您的代码的另一个评论，与您的问题无关：您目前正在每个keyup个事件发出HTTP请求。这将真的减慢您的页面速度，它可能会使您的服务器过载，如果事情不顺利，它可能会导致竞争条件和其他类型的错误（请记住，HTTP有些不可预测）。你应该去掉你的keyup事件处理程序。使用像Ben Alman的jQuery油门/去抖插件[2]之类的东西来去抖你的处理程序（参见下面的例子）。（您可能也希望将其更改为keypress事件，但这并非必要; keypress事件对象只包含一些有时可能有用的额外信息。）

我会推荐这样的东西（假设你已经包含了一些jQuery插件给你$.debounce()）：

$("input#search").live(
    "keypress", // changed keyup to keypress; not necessary, but often preferred
    $.debounce(
        250,    // debounced by 250ms; might want longer, but I wouldn't go any less
        function(e) {
            var search_string = $(this).val(),
                no_results_str = '<tr><td colspan="4">No Results</td></tr>';
            if (search_string === '') {
                $('#customers').html(no_results_str);
            }
            else {
                if(search_string !== '') {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "/section/search_go",
                        data: { query: search_string },
                        cache: false,
                        success: function(response) {
                            console.log('Got '+response.length+' results');
                            if(response.length === 0) {
                                $('#customers').html(no_results_str);
                            }
                            else {
                                var trHTML = '';
                                $.each(response, function(i, item) {

                                    trHTML += '<tr>';
                                    trHTML += '<td>' + item.accountnumber + '</td>';
                                    trHTML += '<td>' + item.company + '</td>';
                                    trHTML += '<td>' + item.phone + '</td>';
                                    trHTML += '<td>' + item.postcode + '</td>';
                                    trHTML += '</tr>';
                                });
                                $('#customers').html(trHTML);
                            }
                        }
                    });
                }
            }
        }
    )
);

<强>链接：

Jquery $ .each循环计数器

3 个答案: