Passa l'intero modulo come dati nella funzione jQuery Ajax

Ho una funzione jQuery Ajax e vorrei inviare un intero modulo come dati di post. Aggiorniamo costantemente il modulo in modo che diventi noioso aggiornare costantemente gli input del modulo che devono essere inviati nella richiesta.

C'è una funzione che fa esattamente questo:

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

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

serialize () non è una buona idea se si desidera inviare un modulo con il metodo post. Ad esempio, se si desidera passare un file tramite Ajax, non funzionerà.

Supponiamo di avere un modulo con questo ID: "myform".

la soluzione migliore è creare un FormData e inviarlo:

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

In generale, utilizzare serialize()l'elemento del modulo.

Ricorda che più opzioni <select> sono serializzate con la stessa chiave, ad es

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

si tradurrà in una stringa di query che include più occorrenze dello stesso parametro di query:

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

che potrebbe non essere quello che vuoi nel backend.

Uso questo codice JS per ridurre più parametri a una singola chiave separata da virgola (copiata spudoratamente dalla risposta di un commentatore in un thread al posto di John Resig):

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

che trasforma quanto sopra in:

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

Nel tuo codice JS lo chiameresti così:

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

Spero che aiuti.

Uso

serializzare ()

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

Serializzare un modulo in una stringa di query, che potrebbe essere inviato a un server in una richiesta Ajax.

Una buona opzione jQuery per farlo è tramite FormData . Questo metodo è adatto anche per l'invio di file tramite un modulo!

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

La tua funzione di invio in jQuery sarebbe simile a questa:

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

per aggiungere dati al modulo è possibile utilizzare un input nascosto nel modulo oppure aggiungerlo al volo:

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

Devi solo pubblicare i dati. e Utilizzo dei parametri impostati per la funzione jquery ajax. Ecco un esempio

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

Le altre soluzioni non hanno funzionato per me. Forse il vecchio DOCTYPE nel progetto a cui sto lavorando impedisce le opzioni HTML5.

La mia soluzione:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}