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



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



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

601   7  

7 ответов:

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

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

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

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

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

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

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

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

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

Вы можете использовать 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.

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

EDIT: - (после вашего редактирования) тогда forms plugin для вас! Попытаться сделать что-либо.

Попробуйте jQuery form plugin .

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

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

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

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

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

Взгляните на это howto:

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

Comments

    Ничего не найдено.