jQuery .ajax не работает, формировать сообщения с обновлением страницы

Question

У меня есть следующий HTML-код: (который загружается через AJAX в DIV)

(вырезать ненужные части)

<form id='addContactForm' method='post' action='/contact/create/'>
    <div>
        <input type="image" name="submit" id="addContactSubmit" src="/images/add-small.png" style="width: auto; vertical-align: bottom;">
    </div>
</form>

<script>
    $('#addContactSubmit').click(function () {
        alert('got here');
        $.ajax({
            type: 'POST',
            url: '/contact/create/',
            data: $("#addContactForm").serialize(),
            success: function (data, status, xhttp) {
                if (data) {
                    alert('Got Data');
                } else {
                    alert('No Data');
                }
            },
            dataType: html
        });
        return false;
    });
</script>

Так что теперь, когда я нажимаю на <image>, он фактически отправляет форму и обновляет страницу. Я прочитал другой пост, в котором говорилось, что проблема была в том, что jquery не был загружен, а однажды загружен, что решило проблему. Тем не менее, в этом случае я получаю предупреждение, которое сообщает мне, что jquery загружается (так как событие click срабатывает нормально), однако кажется, что часть $.ajax не выполняется (или есть проблема с ней) , Если я удаляю часть $.ajax, я получаю предупреждение, и страница не отправляется и не перезагружается.

Первоначально я заявлял, что html-форма загружается с помощью вызова ajax на главной странице, и мне интересно, имеет ли это какое-то отношение к неудачному сообщению ajax. Примечание. Я также никогда не получаю оповещение («Получил данные») или («Нет данных»), только оповещение «получено здесь»

любой инсайт был бы великолепен. Спасибо

Еще одно замечание: я не получаю ошибок в firebug.

Answer 1

Это вход для отправки, который автоматически отправит обратно форму, а также запустит ваш ajax-скрипт.

Попробуйте это ...

<script>
    $('#addContactSubmit').click(function (e) {
        e.preventDefault();
        alert('got here');
        $.ajax({
            type: 'POST',
            url: '/contact/create/',
            data: $("#addContactForm").serialize(),
            success: function (data, status, xhttp) {
                if (data) {
                    alert('Got Data');
                } else {
                    alert('No Data');
                }
            },
            dataType: html
        });
        return false;
    });
</script>

Все, что я сделал, это передал событие click вашей функции jQuery, а затем вызов e.preventDefault () останавливает выполнение события щелчка DOM по умолчанию, которое в данном случае для кнопки отправки является отправкой назад.

Надеюсь, это имеет смысл, у вас все получилось!