Question

我正在尝试做什么：将表单提交到将在后台运行的脚本，在输入字段中提供带有动画点的加载文本，并在完成后返回消息同样的领域。

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

我有什么：

<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>

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

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

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

Answer 1

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

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

其次，我在您的代码中看到了一些问题。您在匿名函数中执行ajax调用并将其作为第3个参数提供给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");
        });
    }
  });
});

在处理脚本时使用jQuery显示动画加载消息

1 个答案: