jquery serialize и $ .post

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

тип = «Отправить»

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

типа = «кнопки»

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

И в случае, когда элемент формы не имеет указанного атрибута действия, это представление просто отправляет данные обратно на ту же страницу. Таким образом, вы в конечном итоге увидите обновление страницы, а также сериализованные данные, отображаемые в 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() в обработчик нажатия кнопки, чтобы предотвратить 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); }); }); 

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

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

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

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

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

Так что это, наверное, немного тупо, но я сделал функцию, чтобы помочь мне сделать это, потому что я устал каждый раз придумывать кучу исправлений. 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 для всех моих ответов с сервера.

Попробуйте этот синтаксис. Я использую это для сериализации формы и 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)); }); 

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

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

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