Как отправить сложную форму, используя AJAX Jquery?

Question

Я пытаюсь отправить форму, используя ajax Jquery. В нем есть несколько текстовых полей, несколько флажков и раскрывающийся список нескольких параметров (т. Е. Можно выбрать несколько параметров).

Кто-то здесь сказал мне, что я могу получить значения всех выбранных флажков, используя

$("input:checkbox[name=type]:checked")

Затем я могу перебрать все значения, возвращенные приведенным выше кодом, присвоить их массиву следующим образом:

var types=new Array();

    $.each(cboxes, function()
      {
         types[types.length]=$(this).val();
      }
    );

И попробуйте отправить форму, используя это:

var someField=$("#someField").val();
var someField2=$("#someField2").val();
var data={field1 : someField, field2=someField2, s_types:types};
$.post("signup.php?type=p",types);

Но это не работает, в частности, флажки отправляются неправильно. Как я могу заставить это работать?

Answer 1

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

$.ajax({
  url: "mybackend.php",
  data: $("#myForm").serialize(),
  success: function(e) { // do something on success },
  error: function(e) { // do something on error }
});

Помните, что сообщения javascript всегда отправляют данные в формате UTF-8, поэтому убедитесь, что вы ожидаете этого на сервере, если планируете отправлять текст с международными символами.

Answer 2

Я рекомендую использовать плагин для этого. Взгляните на этот бланк плагина . Он также может прекрасно интегрироваться с плагином проверки .

Answer 3

jQuery $. Param по умолчанию не обрабатывает массивы ( по дизайну ), поэтому вы не можете использовать $ .serialize как есть. Используйте плагин, как предложено в kgiannakis 'answer , или перезапишите функцию $ .param, чтобы он правильно обрабатывал массивы:

function($) {
  $.param = function(a) {
    var s = [];
    if (a.constructor == Array || a.jquery) 
      jQuery.each(a, function() { s.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( this.value ) ); });
    else
      for (var j in a)
        if (a[j] && a[j].constructor == Array) jQuery.each( a[j], function(){ s.push( encodeURIComponent(j) + "[]=" + encodeURIComponent( this ) ); });
        else s.push(encodeURIComponent(j) + "=" + encodeURIComponent(a[j]));
    return s.join("&").replace(/%20/g, "+");
  };
})(jQuery);

... и затем используйте $ .serialize, как предложено Данита .