jquery - serialize - formulario ajax php

Pasar formulario completo como datos en la función jQuery Ajax

Question

Tengo una función jQuery ajax y me gustaría tener un formulario completo como datos de publicación. Estamos constantemente actualizando el formulario, por lo que resulta tedioso actualizar constantemente las entradas del formulario que se deben enviar en la consulta.

Answer 1

En general use serialize() en el elemento de formulario.

Tenga en cuenta que las múltiples <select> opciones se serializan bajo la misma clave, por ejemplo

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

dará como resultado una cadena de consulta que incluye múltiples ocurrencias del mismo parámetro de consulta:

[path]?foo=1&foo=2&foo=3&someotherparams...

que puede no ser lo que quieres en el back-end.

Uso este código JS para reducir múltiples parámetros a una sola clave separada por comas (copia descaradamente de la respuesta de un comentarista en un hilo en el lugar de John Resig):

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&/1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&/1/.test(data) ? compress(data) : data;
}

que convierte lo anterior en:

[path]?foo=1,2,3&someotherparams...

En tu código JS lo llamarías así:

var inputs = compress($("#your-form").serialize());

Espero que ayude.

Answer 2

Hay una función que hace exactamente esto:

http://api.jquery.com/serialize/

var data = $(''form'').serialize();
$.post(''url'', data);

Answer 3

Solo tienes que publicar los datos. y el uso de la función jquery ajax establece los parámetros. Aquí hay un ejemplo.

<script>
        $(function () {

            $(''form'').on(''submit'', function (e) {

                e.preventDefault();

                $.ajax({
                    type: ''post'',
                    url: ''your_complete url'',
                    data: $(''form'').serialize(),
                    success: function (response) {
                        //$(''form'')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $(''form'')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Answer 4

Una buena opción jQuery para hacer esto es a través de FormData . ¡Este método también es adecuado para enviar archivos a través de un formulario!

<form id=''test'' method=''post'' enctype=''multipart/form-data''>
   <input type=''text'' name=''testinput'' id=''testinput''>
   <button type=''submit''>submit</button>
</form>

Su función de envío en jQuery se vería así:

$( ''form#test'' ).submit( function(){
   var data = new FormData( $( ''form#test'' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: ''json'',
      type: $( this ).attr( ''method'' );
      url: ''yourapi.php'',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

para agregar datos a su formulario, puede usar una entrada oculta en su formulario o agregarlo sobre la marcha:

var data = new FormData( $( ''form#test'' )[ 0 ] );
data.append( ''command'', ''value_for_command'' );

Answer 5

Utilizar

serializar ()

var str = $("form").serialize();

Serializar un formulario a una cadena de consulta, que podría enviarse a un servidor en una solicitud de Ajax.

Answer 6

serialize () no es una buena idea si desea enviar un formulario con el método de publicación. Por ejemplo, si quieres pasar un archivo a través de ajax, no va a funcionar.

la mejor solución es hacer un FormData y enviarlo:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: ''POST'',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

Answer 7

<form id="add-item-form">
    . . .
</form>   

<script>
    $(''#add-item-form'').submit(function (event) {
        event.preventDefault();
        var data = $(''#add-item-form'').serialize();
        $.post("/Item/AddItem", data, function (response) {
            . . .
        });
    });
</script>