Как отправить форму со многими полями с помощью jQuery?

Хотя $.ajax() можно использовать для создания ajax-вещей, я не думаю, что он подходит для публикации значений большой формы.

Как бы вы post создали большую форму (много полей), не введя их вручную?

Ответы

Ответ 1

Каковы ваши аргументы в пользу этого предположения? POST предназначен для передачи больших объемов данных, чем GET. Запрос AJAX POST почти точно совпадает с "обычным" POST-запросом, он просто связан с браузером и обрабатывается его несколькими способами. Несколько заголовков могут немного отличаться, но данные все одинаковы. Почему AJAX не справляется с "большой" формой?

Что бы вы вообще определили как "большую" форму?

Изменить: Спасибо за разъяснение по вашему вопросу. Я понимаю, о чем вы сейчас спрашиваете, и я вижу, откуда вы. Для формы с большим количеством входов может быть больно связать ее с запросом Ajax все время.

Поскольку вы используете jQuery, это простое решение. Ознакомьтесь с методом serialize(). Вы даете ему форму, и она возвращает вам строку запроса всех элементов ввода и значений формы, которые вы можете передать непосредственно в запрос ajax. Там есть пример на странице руководства, где показано, как это делается.

Все, что вам нужно сделать, это следующее:

$.ajax({
    data: $("form").serialize(),
    //etc.
});

где "form" - это идентификатор вашей формы.

Ответ 2

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

$.ajax({
   type: "POST",
   url: "form.php",
   data: $("#form_id").serialize()
   success: function(msg) {
     alert("Form Submitted: " + msg);
   }
 });

Ответ 3

Вы можете использовать jQuery.post( url, data, callback, type), поскольку его проще jQuery.ajax( options ).

Используя serialize, вы можете отправить всю форму автоматически.

$.post("/post_handler/",
    $("form#my_form").serialize(),
    function(json){
        /*your success code*/
    }, "json");

Более полный пример:

<script>
$().ready(function(){
    $("form#my_form submit").click(function(){
        $.post("/post_handler/",
            $("form#my_form").serialize(),
            function(json){
                /*your success code*/
            }, "json");
        return false;
    });
}
</script>
<form id="my_form" action="/post_handler/" method="post">
  <input type="text" name="text1" value="my text 1" />
  <input type="text" name="text2" value="my text 2" />
  <input type="submit" name="submit_button" value="Send" />
</form>

Это заменит значение по умолчанию post и выполнит его с помощью AJAX.

Ответ 4

Если вы еще не пробовали. Затем создайте форму БОЛЬШОЙ (теперь что бы вы ни подразумевали под этим) и используйте плагин $.ajax() или jQuery Forms для публикации. Вы узнаете, что это за это или нет!

EDIT: - (после вашего редактирования) Затем form plugin для вас! Сделайте снимок.

Ответ 5

Попробуйте плагин jquery form.

Это, вероятно, делает именно то, что вам нужно сделать из коробки.

Ответ 6

Я отправил довольно сложные (большие) формы с $.ajax() и не имел проблем. Я не отправлял файлы по ajax-запросам, но я видел, как это сделано, и оно работает лучше, чем традиционные сообщения, потому что оно не связывает браузер во время загрузки.

Основываясь на вашем комментарии к @zombat, я предполагаю, что у вас очень большое количество входов, большинство из которых в большинстве случаев будут пустыми. Два предложения здесь: 1) разделить входы на отдельные формы и отправлять их только сразу, как только они коснутся/завершены. 2) изучите состояние вашей формы с помощью JavaScript и оберните информацию в JSON или XML, а вместо публикации данных формы опубликуйте только структуру данных.

"Большой" не должен быть проблемой, возможно, вы можете найти лучшее прилагательное для описания своих данных, которое позволит всем понять, почему его трудно отправить.