将 JSON 响应放入隐藏字段并将其检索到函数中答案

【问题标题】：Putting a JSON response into a hidden field and retrieving it into a function将 JSON 响应放入隐藏字段并将其检索到函数中
【发布时间】：2013-02-02 20:57:39
【问题描述】：

我正在使用 JSON 使用以下函数检索数据库中表包含的行数。

function rowCount()
{
    $.ajax({
        headers: { 
                'Accept': 'application/json',
                'Content-Type': 'application/json' 
            },
        datatype:"json",
        type: "GET",                    
        url: "/wagafashion/ajax/CmsRowCount.htm",
        success: function(response)
        {
            $("#rows").val(response);
        },
        error: function(e)
        {
            alert('Error: ' + e);
        }
    });
}

在成功处理程序中，响应按预期到达。服务器端没有问题。

响应只是映射到 Java 的 long 类型，它表示数据库表中的行数。

我在成功处理程序中使用$("#rows").val(response); 将此响应放在id 为rows 的隐藏字段中。

使用以下 jQuery 函数提交表单时调用上述函数。

$(function() {
    $('#dataForm').submit(function() {

        rowCount();  //Invokes the above function that makes a JSON request.
        var rows=$("#rows").val();
        alert("rows = "+rows);

        return false;
    });
});

警告框尝试警告隐藏字段包含的值（即上述 JSON 响应）但第一次它为空。仅当我再次按下提交按钮（无需刷新页面）时，它才会提醒实际值。

还尝试将前面的函数替换为以下函数。

$(function() {
    $('#dataForm').submit(function() {

        rowCount();  //Invokes the first function that makes a JSON request.     

        var form = $(this),
        url = form.attr('action'),
        rows = form.find('input[name="rows"]').val();

        alert("rows = "+rows);

        return false;
    });
});

但它也没有工作。为什么会这样？将隐藏字段的正确值检索到前面的 jQuery 函数中的方法是什么？

【问题讨论】：

Ajax 是异步的。您正尝试在收到响应之前访问数据。请看stackoverflow.com/questions/14220321/…。

标签： ajax json spring jquery

【解决方案1】：

警告框尝试警告隐藏字段包含的值（即上述 JSON 响应）但第一次它为空。

Ajax 调用是异步的。当您调用rowCount 时，您开始调用，但随后rowCount 返回并且您的代码继续。调用直到稍后才完成（这就是ajax 接受回调的原因）。

如果您从回调触发您正在执行的下一步操作，您将获得价值。您通常通过让rowCount 接受它自己的回调来做到这一点，如下所示：

function rowCount(callback)          // <==== Accept the callback
{
    $.ajax({
        headers: { 
                'Accept': 'application/json',
                'Content-Type': 'application/json' 
            },
        datatype:"json",
        type: "GET",                    
        url: "/wagafashion/ajax/CmsRowCount.htm",
        success: function(response)
        {
            $("#rows").val(response);
            callback();              // <==== Call the callback
        },
        error: function(e)
        {
            alert('Error: ' + e);
            callback();              // <==== Probably want to give it a value telling it things failed
        }
    });
}

然后使用它：

$(function() {
    $('#dataForm').submit(function() {
        var form = $(this); // <== Grab this outside the callback

        rowCount(function() {

            var url = form.attr('action'),
                rows = form.find('input[name="rows"]').val();

            alert("rows = "+rows);
        });

        return false;
    });
});

如果您想根据回调决定是否允许提交表单，则必须始终取消提交，然后如果您想允许，则从回调中以编程方式触发提交。

【讨论】：