在Perl中使用jQuery ajax（）会导致成功闪烁

Question

我试图更新一些通常运行Perl脚本的代码，该脚本会为消息输出一个动态生成的html页面。最终，我的最终结果是仅更新一个div与Perl文件的输出，而不是发送用户到一个新的页面。

我一直在试图找到最好的方式来做到这一点的几条道路。在Perl方面没有找到一种方法来实现这一点，我现在正在考虑jQuery ajax()。

这里是我迄今为止，它的部分工作：

的Perl：

#!/usr/bin/perl 
# ===================================================================== 

print "Content-type: text/html \n\n"; 
print "<p>Hello</p>"; 

HTML：

<form id="myForm" action="#"> 
    <input type="submit" value="click me" /> 
</form> 

<div id="message"></div> 

的jQuery/JavaScript的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myForm').submit(function() { 
      $.ajax({ 
       type: 'POST', 
       url: '/cgi-bin/myPerl.cgi', 
       async: false, 
       success: function(data) { 
        $('#message').html(data); 
       } 
      }); 
     }); 
    }); 
</script> 

1）当我点击该按钮时，#messagediv只闪烁用于第二消息，然后将其变成空白。为什么会发生？这是我的主要问题。

我还没有完全理解.ajax()所有设置，尽管我阅读的the documentation：

2）它只能在所有如果我用async: false，否则有true或离开这个环境的时候，我得到一个“未能加载资源”错误。有人可以解释。

3）有没有更好的方法来做到这一点？ PHP？我只是想动态地更新一个div与来自Perl文件的消息，避免页面刷新或新页面。

Answer 1

将return false或e.preventDefault()添加到提交事件中。

$('#myForm').submit(function(e) { 
     e.preventDefault() 
     $.ajax({ 
      type: 'POST', 
      url: '/cgi-bin/myPerl.cgi', 
      async: false, 
      success: function(data) { 
       $('#message').html(data); 
      } 
     }); 
     // return false; 
    });