Jquery serialize и $.post

Ответ 1

Если вы используете элемент <button> для активации сериализации и ajax, и если этот элемент <button> находится внутри элемента form, то button автоматически действует как представление формы, независимо от того, что другое. щелчок, вы даете его с помощью jQuery.

тип = 'Submit'

<button></button> и <button type='submit'></button> - одно и то же. Они отправят форму, если она помещена в элемент <form>.

тип = 'button'

<button type='button'></button> отличается. Это обычная кнопка и не будет отправлять форму (если вы не намеренно заставляете ее отправлять форму через JavaScript).

И в случае, когда элемент form не имеет указанного атрибута действия, это представление просто отправляет данные обратно на ту же страницу. Таким образом, вы увидите обновление страницы вместе с сериализованными данными, появляющимися в URL-адресе, как если бы вы использовали GET в своем ajax.

Возможные решения

1 - введите тип <button> button. Как объяснялось выше, это не позволит кнопке отправить форму.

До:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

После:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
<button type='button' id='mySubmitButton'>Submit</button>
</form>

2 - Переместите элемент <button> вне элемента <form>. Это не позволит кнопке отправить форму.

До:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
    <button id='mySubmitButton'>Submit</button>
</form>

После:

<form id='myForm'>
    <!--Some inputs, selects, textareas, etc here-->
</form>
<button id='mySubmitButton'>Submit</button>

3 - добавьте в preventDefault() в обработчик нажатия кнопки, чтобы предотвратить отправку формы (это действие по умолчанию):

$("#addShowFormSubmit").click(function(event){
  event.preventDefault();
  var perfTimes = $("#addShowForm").serialize();
  $.post("includes/add_show.php", {name: $("#showTitle").val(), results: perfTimes },      function(data) {
    $("#addShowSuccess").empty().slideDown("slow").append(data);
  });
});

Очевидно, не видя всего вашего кода, я понятия не имею, так ли это относится к вашей проблеме, но единственная причина, по которой я когда-либо видел поведение, которое вы описываете, заключается в том, что кнопка отправки была <button> без указанного типа.

Ответ 2

попробуйте использовать serializeArray() вместо serialize(). serialize() создаст строку запроса с кодировкой url, тогда как serializeArray() создает структуру данных JSON.

Ответ 3

Что заставляет вас думать, что данные добавлены к URL?

В любом случае, не имеет смысла передавать значения формы в самих данных формы? Это позволит вам пропустить шаг "Взорвать":

$("#addShowFormSubmit")
  .click(function() { 
      var perfTimes = $("#addShowForm").serialize(); 
      $.post("includes/add_show.php", 
         $.param({name: $("#showTitle").val()}) + "&" + perfTimes, 
         function(data) {...}); 
  });

Ответ 4

Итак, это, наверное, немного тупо, но я сделал функцию, чтобы помочь мне сделать это, потому что я устал каждый раз собирать кучу исправлений. serializeArray является досадным, потому что он предоставляет коллекцию объектов, когда все, что я хотел, чтобы восстановить PhP, было ассоциативным массивом. Функция ниже будет проходить через сериализованный массив и будет строить новый объект с соответствующими свойствами только тогда, когда существует значение.

Во-первых, функция (она принимает идентификатор рассматриваемой формы):

function wrapFormValues(form) { 
    form = "#" + form.attr("id") + " :input";
    form = $(form).serializeArray();
    var dataArray = new Object();

    for( index in form)
    {   
        if(form[index].value)   {
            dataArray[form[index].name] = form[index].value;    
        }
    }       

    return dataArray; 
}

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

var payload = new Object(); 
//stringify requires json2.js from http://www.json.org/js.html
payload.data = JSON.stringify(data);

$.post("page.php", payload,  
    function(reply) {
        //deal with reply.
    });

На стороне сервера все, что вам нужно сделать, это $payload = json_decode($_POST['data'], true), и у вас есть ассоциативный массив, где ключи являются именами полей формы.

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

Ответ 5

Попробуйте этот синтаксис. Я использую это для сериализации формы и POST через ajax-вызов службы WCF. Кроме того, вы можете отправить обратно один объект JSON вместо того, чтобы строить объект так, как вы. Попробуйте следующее:

var serializedForm = serializedForm = $("#addShowForm").serializeArray();

$.post("includes/add_show.php", 
    {
        "myObjectName": ("#showTitle").val(), results: perfTimes 
    }, function(data) 
        {
            $("#addShowSuccess").empty()
            .slideDown("slow")
            .append(JSON.stringify(serializedForm)); 
        });

Ответ 6

На стороне php вы можете посмотреть parse_str. Он будет анализировать эту строку url в переменных или в массив, если вы используете второй необязательный параметр.

Ответ 7

Еще одна возможная причина для этой проблемы: если у вас есть форма без каких-либо действий отправки, назначенных ей, всякий раз, когда вы нажимаете клавишу "ENTER" при заполнении формы, форма будет отправлена ​​на текущий URL-адрес, поэтому вы увидите, что сериализованные данные отображаются в URL-адресе, как если бы вы использовали транзакцию GET ajax. Простое решение этой проблемы, просто не позволяйте ENTER от отправки формы при ее нажатии:

//Prevent Form Submission when Pressing Enter
$("form").bind("keypress", function(e) {
if (e.keyCode == 13)
    return false;
});