form - serializearray jquery php

jquery serialize y $.post

Question

Estoy tratando de enviar muchos datos de un formulario usando el método $ .post en jQuery. He utilizado la función serialize () primero para convertir todos los datos del formulario en una cadena larga que explotaré en el servidor. Lo extraño es que cuando intento enviarlo usando $ .post, anexa el resultado del serialize () a la URL como si lo estuviera enviando usando GET. Alguien tiene alguna idea de por qué está sucediendo esto?

Aquí está el jquery:

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

aquí está el php:

$show = $_POST[''name''];
$results = $_POST[''results''];
$perfs = explode("&", $results);
foreach($perfs as $perf) {
    $perf_key_values = explode("=", $perf);
    $key = urldecode($perf_key_values[0]);
    $values = urldecode($perf_key_values[1]);
}
echo $key, $values;  

Answer 1

¿Qué lo lleva a creer que los datos se anexan a la URL?

De todos modos, ¿no tendría más sentido pasar los valores del formulario en los datos del formulario en sí? Le permitirá omitir el paso "explotar":

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

Answer 2

Así que esto es probablemente un poco obtuso, pero hice una función para ayudarme a hacer esto, ya que me cansé de hacer un montón de correcciones cada vez. serializeArray es un poco molesto porque proporciona una colección de objetos, cuando todo lo que quería que PhP reconstruyera era una matriz asociativa. La siguiente función pasará por la matriz serializada y construirá un nuevo objeto con las propiedades apropiadas solo cuando exista un valor.

En primer lugar, la función (toma el ID del formulario en cuestión):

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; 
}

Al construir mis publicaciones también suelo usar un objeto, ya que normalmente etiqueto dos o tres valores antes de los datos del formulario y creo que se ve más limpio que definirlo en línea, por lo que el paso final se ve así:

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.
    });

En el lado del servidor todo lo que tienes que hacer es $payload = json_decode($_POST[''data''], true) y tienes una matriz asociativa donde las claves son los nombres de tus campos de formulario.

Sin embargo, la exención de responsabilidad completa, las selecciones múltiples probablemente no funcionen aquí, probablemente solo obtendrás el valor que fue el último en la lista. Esto también se crea muy específicamente para adaptarse a uno de mis proyectos, por lo que es posible que desee ajustarlo a su gusto. Por ejemplo, uso json para todas mis respuestas del servidor.

Answer 3

En el lado php, es posible que desee examinar parse_str . Analizará esa cadena de url en variables, o en una matriz si utiliza el 2º parámetro opcional.

Answer 4

Prueba esta sintaxis Lo uso para serializar un formulario y POST a través de una llamada jaja al servicio WCF. Además, puede enviar de vuelta un objeto JSON único en lugar de construir el objeto como está. Prueba esto:

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)); 
        });

Answer 5

Si está utilizando un elemento <button> para activar serialize y ajax, y si ese elemento <button> está dentro del elemento de form , el button actúa automáticamente como un envío de formulario, no importa qué otra asignación .click le dé con jQuery .

tipo = ''enviar''

<button></button> y <button type=''submit''></button> son lo mismo. Enviarán un formulario si se coloca dentro del elemento <form> .

tipo = ''botón''

<button type=''button''></button> es diferente. Es solo un botón normal y no enviará el formulario (a menos que lo haga enviar el formulario a través de JavaScript).

Y en el caso en que un elemento de formulario no tenga ningún atributo de acción especificado, este envío simplemente envía los datos nuevamente a la misma página. Por lo tanto, terminará viendo una actualización de página, junto con los datos serializados que aparecen en la URL como si hubiera usado GET en su ajax.

Soluciones posibles

1 - Haz <button> el <button> . Como se explicó anteriormente, esto evitará que el botón envíe el formulario.

Antes de:

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

Después:

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

2 - Mueva el elemento <button> fuera del elemento <form> . Esto evitará que el botón envíe el formulario.

Antes de:

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

Después:

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

3 - Agregue preventDefault() en el controlador de clic de botón para evitar que se envíe el formulario (es una acción predeterminada):

$("#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);
  });
});

Obviamente, sin ver todo su código, no tengo idea si este es el caso para su problema, pero la única razón por la que he visto el comportamiento que está describiendo es porque el botón de enviar era un <button> sin un tipo especificado.

Answer 6

Una razón más para este problema: si tiene un formulario sin ningún tipo de acción de envío asignado, cada vez que presiona la tecla "ENTER" mientras completa el formulario, el formulario se enviará a la URL actual, por lo que vea que los datos serializados aparecen en la URL como si estuviera usando una transacción GET ajax. Una solución simple a este problema, solo evita que ENTER envíe el formulario cuando se lo presiona:

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

Answer 7

intente usar serializeArray () en lugar de serialize (). serialize () producirá una cadena de consulta codificada en url, mientras que serializeArray () producirá una estructura de datos JSON.