3

我正在尝试做的事情：将表单提交给将在后台运行的脚本，在输入字段中提供带有动画点的加载文本，并在同一字段中完成后返回一条消息。

问题：我设法捕获输入变量并显示动画加载消息。我对此有点陌生，所以嵌套代码可能很乱，加载显示应该是一个可以嵌套的函数（如果我理解正确的话）。它在显示加载消息时停止，所以我假设表单实际上从未被提交，整个脚本只是在某处出现。

我有什么：

<script>
  jQuery(document).ready(function($)
  {
    $("#subsenid").submit(function(e)
    {
      e.preventDefault();
      var senid = $("input:text[name=submit_sen]").val();
      i = 0;
      setInterval(function() 
      {
        i = ++i % 4;
        $("#submit_senid").val("Importing"+Array(i+1).join("."));
      }, 500, function()
        {
          $.get("/inc/receiving_script.php", {psnid: senid}, function(data)
          {
            $("#submit_senid").val("All done");
          });
        }
      });
    });
  </script>

长话短说：提交表单，显示动画加载消息并从脚本返回消息（我只是添加了“全部完成”消息而不是脚本的正确返回消息，以查看是否发生了任何事情）。

非常感谢任何正确方向的指示和建议。

如果需要更多信息，我会尽快提供。

4

1 回答 1

1

您使用的是萤火虫之类的东西吗？你应该。它是 Firefox 的插件，可帮助您调试代码。（其他现代浏览器也有类似的控制台和工具，通常您可以通过右键单击页面并选择“检查元素”或类似内容来访问它们）

如果您打开 firebug，您将能够看到对您的脚本的 ajax 调用，以及它的结果。它还允许您在代码中设置执行断点（在提交处理程序的开头设置一个）并逐行遍历脚本。这样您就可以看到实际发生的情况并检查变量的内容等。此外，可以轻松检查 DOM。对任何前端开发人员的宝贵帮助！

其次，我在您的代码中看到了一些问题。您在匿名函数中执行 ajax 调用，并将其作为第三个参数提供给 setInterval，但这是行不通的。您需要启动动画，执行 ajax 调用，并在 ajax 回调中停止动画并将检索到的数据设置在您想要的位置。

未经测试，但这样的事情应该让你走上正轨：

jQuery(document).ready(function($){

    $("#subsenid").submit(function(e){
        e.preventDefault();
        var senid = $("input:text[name=submit_sen]").val();
        var i = 0;

        var animationInt = setInterval(animateBox, 500);
        function animateBox(){
            i = ++i % 4;
            $("#submit_senid").val("Importing"+Array(i+1).join("."));
        }

        $.get("/inc/receiving_script.php", {psnid: senid}, function(data){
            clearInterval(animationInt);
            $("#submit_senid").val("All done");
        });
    }
  });
});
于 2012-09-01T08:31:10.103 回答