Преобразовать традиционный пост в ajax

Question

Предположим, у меня есть форма:

<form id="myForm" method="POST" action="/something/somewhere">
   <input type="text" name="textField" />
   <input type="submit" name="foo" value="bar" />
</form>

действие /something/somewhere возвращает не полную HTML-страницу, а просто фрагмент.

Я хотел бы разрешить кнопку отправкивыполните свою работу по публикации, но поймайте результат этой публикации и вставьте его где-нибудь в DOM.

JQuery submit происходит до формы, которая фактически отправлена.Пример того, как это может работать:

$('#myForm').posted(function(result)
{
    $('#someDiv').html(result);
});

Есть ли способ сделать это?

Answer 1

Описание

Для этого вы можете использовать метод jQuery .post() и .serialize().

.post () Загрузка данных с сервераиспользуя запрос HTTP POST.

.serialize () Кодировать набор элементов формы в виде строки для отправки.

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

Образец

HTML

<form id="myForm" method="POST" action="/My/MyActionMethod">
   <input type="text" name="textField" />
   <input type="submit"/>
</form>

<div id="someDiv"></div>

jQuery

$(function() {
  $('#myForm').live('submit', function (e) {
     var form = $(this);
     e.preventDefault();
     $.post(form.attr('action'), form.serialize(), function (result) {
        $('#someDiv').html(result);
     });
  });
});

Контроллер MVC

public class MyController : Controller
{
    [HttpPost]
    public ActionResult MyActionMethod(FormCollection forms)
    {
        // do something with forms["textField"];
        return Content("<b>Hello World!</b>");
    }
}

Если у вас возникли проблемы с его работой (спасибо IE), попробуйте

event.preventDefault ? event.preventDefault() : event.returnValue = false;

Дополнительная информация

• jQuery.post ()
• jQuery.serialize ()
• событие.preventDefault ()

Answer 2

Хотя вы можете самостоятельно взломать простой пример, используя .post и .serialize, если вы хотите сделать что-то более простое, я бы посоветовал изучить этот плагин , который (по словам github и страницы проекта) активно поддерживается сообществом jQuery.