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）当我点击该按钮时，#message div只会将消息闪烁一秒钟然后变为空白。为什么会这样？这是我的主要问题。

尽管我阅读了the documentation，但我还无法完全理解.ajax()中的所有设置：

2）只有在我使用async: false时才会有效，否则只有true或者保留此设置，我会得到“无法加载资源“错误。有人可以解释一下。

3）有更好的方法吗？ PHP？我只想用来自Perl文件的消息动态更新div，避免页面刷新或新页面。

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;
    });

使用带有Perl的jQuery ajax（）会导致成功闪烁

1 个答案: