Использование jQuery ajax () с Perl вызывает мерцание при успехе

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 мигает только сообщение в течение секунды, а затем оно становится пустым. Почему это происходит? Это мой основной вопрос.

Я также не до конца понимаю все настройки в .ajax(), несмотря на то, что прочитал документацию :

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