Как отправить данные с формы и получить ответ ajax?

Question

[Al Sm]

Здравствуйте. Помогите пожалуйста разобраться, в js совсем не силен :) Как отправить данные с формы, используя ajax, и получить на эту же страницу ответ или просто выполнение функции по отправке формы. На странице с формой подключена библеотека jquery и form.js, данные уходят на form.php.

Форма:

<form method="post" action="/form.php">
   <input type="text" name="msg">
   <input type="submit">
</form>

form.php
echo $_POST["msg"]; //или функция например

form.js

$(document).ready(function() {

    $('form').submit(function(event) {
        event.preventDefault();

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(result) {
               ???
            },
        });
    });
});

Comments

[Froggyweb]

$('селектор куда помещаем ответ').html(data);

[Al Sm]

Froggyweb: А если нужно чтобы по нажатию выполнился код из form.php?

[Larisa Moroz]

Ваш код уже обработал форму, отправил данные и получил ответ.
Если вы хотите после получения ответа выполнить какую-то функцию, то её не в ответе надо передавать, а написать заранее в блоке $(document).ready(function() { … }) и вызывать потом вместо ??? в зависимости от полученного result

[Al Sm]

Larisa Moroz: Большое спасибо, буду разбираться!

[Froggyweb]

Александр Смирнов: скрипт вставит то что вернет сервер

Answer 1

[Максим Тимофеев]

success: function(result) {
                $('.someClass').html(result); // выводим тег с определенным класс
                console.log(result); // выводим в консоль, что бы просто посмотреть что приходит и в каком виде
            },

Answer 2

[Павел Корнилов]

<form method="post" action="/form.php">
   <input type="text" name="msg" value="message">
   <input type="submit">
</form>


<script>
$(document).ready(function() {

    $('form').submit(function(event) {
        event.preventDefault();

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            cache: false,
            processData: false,
            success: function(result) {
				// Ессно, поломает документ. Так, для наглядности
               document.write(result);
            },
        });
    });
});
</script>