Показать результат div после ajax form submit

Question

У меня есть форма, когда при отправке страницы перезагружается и создается div с именем #message и отображается в теле. Я пытаюсь ajaxify мою форму, которую я сделал, но я застрял в том, как заставить сообщение отображаться без перезагрузки. Вот мой код ниже.

$(document).ready(function(){ 
    $('input#submit').on('click', function() { 
    $('#form').submit(function() { 
     $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(response) { // on success.. 
     alert($('div#message').text()); // Alert the message text..fails 
     } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
}); 
}); 

<form action="settings.php" method="post" class="standard-form" id="form"> 
     <input type="text" name="email" id="email" value=""> 
     <input type="password" name="pass" id="pass" size="16" value="" class="password-entry" /> 
     <input type="submit" name="submit" value="<?php _e('Update'); ?>" id="submit" class="small button"/> 
</form> 

Update: Это новая функция, которую я пытаюсь, однако все, что получает извещение не является «[Объект] [объект]» и не сам текст. Я не уверен, что это значит.

$(document).ready(function(){ 
    $('input#submit').on('click', function() { 
    $('#form').submit(function() { 
     $.ajax({ // create an AJAX call... 
     data: $(this).serialize(), // get the form data 
     type: $(this).attr('method'), // GET or POST 
     url: $(this).attr('action'), // the file to call 
     success: function(data) { // on success.. 
     alert($('div#message').text(data)); 
     } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
}); 
}); 

Answer 1

$("form").on('submit', function(event) { 
    event.preventDefault(); // to prevent default page reloading 
    var dataString = $(this).serialize(); // to get the form data 

    $.ajax({ 
     type: "POST", 
     url: "post_process.php", 
     data: dataString, 
     success: function(data){ 
      $('form')[0].reset(); // to reset form data 
     } 
    }).done(function(data){ 
     alert(data); // This will be called after the ajax executed 
    }); 

}); 

Answer 2

Возможно, я пропустил то, что вы действительно хотите архивировать, но я надеюсь, что это все. Извините, если нет.

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

Например, если я вызываю базу данных с ajax() и хочу отображать результаты в div, я выбираю div с jquery и добавляю результат к div в функции успеха.

$('#div').append('<p>Info here</p>') 

Это сделает «p-элемент», который является дочерним по отношению к div. И это будет отображаться без перезагрузки Подробнее о .append() здесь: http://api.jquery.com/append/