Обработка данных формы с использованием jQuery

Question

Я сейчас использую Prototype, но я бы хотел переписать эту функцию в jQuery:

function post(div,url,formId) {
  new Ajax.Updater(div, url, {
    asynchronous:true, 
    parameters:Form.serialize(formId)
  });
}

Пример HTML, который идет вместе с ним:

<form method="post" action="" id="foo" 
  onsubmit="post('result','getdata.php','foo');return false;">
  <input type="text" name="data" />
</form>
<div id="result">&lt/div>

Я смотрю на jQuery.load () и jQuery.post (), но я не уверен, какой из них использовать и как именно.

Заранее спасибо за помощь.

Answer 1

С этим HTML:

<form method="post" action="getdata.php" id="foo">
  <input type="text" name="data" />
</form>
<div id="result"></div>

Вы можете сделать это с помощью jQuery:

$(function() { // wait for the DOM to be ready
    $('#foo').submit(function() { // bind function to submit event of form
        $.ajax({
            type: $(this).attr('method'), // get type of request from 'method'
            url: $(this).attr('action'), // get url of request from 'action'
            data: $(this).serialize(), // serialize the form's data
            success: function(responseText) {
                // if everything goes well, update the div with the response
                $('#result').html(responseText);
            }
        });
        return false; // important: prevent the form from submitting
    });
});

Причина, по которой я избавился от кода onsubmit, заключается в том, что использование встроенного JavaScript такого рода считается плохой практикой. Вы должны стремиться сделать свои формы свободными от JavaScript, а затем связать весь JavaScript от него. Это известно как ненавязчивый JavaScript, и это хорошо.

EDIT :

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

function post(div,url,formId) {
    $.post(url, $('#' + formId).serialize(), function(d) {
        $('#' + div).html(d);
    });
}

Что касается вашей проблемы, плагин livequery может помочь вам в этом. Кроме того, это так же просто, как инкапсуляция кода привязки в функцию и вызов его при каждом добавлении формы.

Answer 2

Вы не можете отправлять формы "multipart / form-data" с jquery из-за проблем безопасности. Вы должны сделать это с помощью flash или iframe ...

Answer 3

Используйте это и избавьтесь от атрибута onsubmit в вашем HTML:

$(document).ready(function() {
    $("#foo").submit(function() {
        $.post($(this).attr("action"), $(this).serialize());
        return false; // prevent actual browser submit
    });
});

Документация метода jQuery для сериализации