Как опубликовать форму с большим количеством полей с помощью jQuery?

Question

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

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

Answer 1

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

Что бы вы вообще назвали "большой" формой?

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

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

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

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

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

Answer 2

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

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

Answer 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.

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

РЕДАКТИРОВАТЬ: - (после вашего редактирования) Тогда плагин формы для вас! Дайте ему шанс.

Answer 7

То, что вы спрашиваете, не сложно. Все, что вам нужно сделать, это собрать содержимое формы и передать его на сервер (обычно с использованием JSON).

Взгляните на это руководство:

http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59