Отправить asapMail без перезагрузки страницы с помощью ajax

Question

У меня есть форма, которая отправляет данные в файл aspMail для доставки (работает нормально в текущем формате), но хотела бы, чтобы данные формы отправлялись без перенаправления на другую страницу. Похоже, Ajax - это способ продолжить, но у меня возникла проблема с настройкой.

Вот как я изменил HTML:

Добавлено:

$('#myForm').submit(function() {  
    $.ajax({  
        data: $(this).serialize(),  
        type: $(this).attr('post'),  
        url: $(this).attr('aspSend.asp'),  
        success: function(response) {  
            $('#created').html(response)  
        }  
    });  
});  

Изменен тег формы с:

<form name="myForm" action"aspSend.asp">

до:

<form name="myForm">

но теперь письма не приходят !! Есть предложения?

Answer 1

Вы уверены, что фрагмент кода с form-html правильный? Вы jQuery ищет элемент с идентификатором myForm. Но ваша форма, похоже, не имеет атрибута id.

Поэтому добавьте идентификатор в форму или попробуйте заменить эту строку

$('#myForm').submit(function() {

с этим

$('form[name="myForm"]').submit(function() {

И добавить оператор return false; после вызова ajax

$.ajax({...});
return false;

Answer 2

Во-первых, я бы посоветовал вам использовать Firebug, чтобы точно видеть, что происходит, когда вы нажимаете кнопку отправки (на самом деле это публикация? Что в POST? Каков ответ?).

Помимо этого, несколько мыслей:

1. Убедитесь, что форма имеет идентификатор myForm, поскольку #myForm ссылается на идентификатор элемента, а не на имя элемента (поэтому добавьте id = 'myForm' в тег формы)

2. Я не уверен в ваших тегах attr для получения информации о сообщении (возможно, они работают, но я не видел, чтобы они выглядели так). Я бы сделал твой пост так:

    $('#myForm').submit(function() {
       dataString = $("#myForm").serialize();
       $.ajax({
       type: "POST",
       url: "aspSend.asp",
       data: dataString,
       dataType: "json",
       success: function(data) {
           if(data.status == "invalid"){
               $("#created").html("<div>Error</div>");
           } else {
                   $("#created").html("<div>Success</div>");
           }
       }
     });
   return false;            
   

   });