web-dev-qa-db-fra.com

Passer le formulaire entier en tant que données dans la fonction jQuery Ajax

J'ai une fonction ajax jQuery et je voudrais soumettre un formulaire entier en tant que données post. Nous mettons constamment à jour le formulaire, il est donc fastidieux de mettre à jour en permanence les entrées de formulaire à envoyer dans la demande.

jqueryajax
126
Brian

Il y a une fonction qui fait exactement ceci:

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

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

serialize () n'est pas une bonne idée si vous voulez envoyer un formulaire avec la méthode post. Par exemple, si vous voulez transmettre un fichier via ajax, cela ne fonctionnera pas.

la meilleure solution consiste à créer un FormData et à l'envoyer:

    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
        }
    });
40
Moh Arjmandi

En général, utilisez serialize() sur l'élément de formulaire.

N'oubliez pas que plusieurs options <select> sont sérialisées sous la même clé, par exemple.

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

se traduira par une chaîne de requête qui inclut plusieurs occurrences du même paramètre de requête:

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

ce qui peut ne pas être ce que vous voulez dans le backend.

J'utilise ce code JS pour réduire plusieurs paramètres à une clé unique séparée par des virgules (copiée sans vergogne à partir de la réponse d'un commentateur dans un fil situé chez John Resig):

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

qui transforme ce qui précède en:

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

Dans votre code JS, vous l'appeleriez ainsi:

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

J'espère que cela pourra aider.

23
nikola

Utilisation

sérialiser ()

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

Sérialiser un formulaire en une chaîne de requête pouvant être envoyée à un serveur dans une requête Ajax.

14
rahul

Il vous suffit de poster les données. et Utilisation des paramètres de jeu jquery ajax. Voici un exemple.

<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>
0
DANISH TAYYIB

Les autres solutions ne fonctionnaient pas pour moi. Peut-être que l'ancien DOCTYPE du projet sur lequel je travaille empêche les options HTML5.

Ma solution:

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

Une bonne option pour cela consiste à utiliser/ FormData . Cette méthode convient également lors de l'envoi de fichiers via un formulaire!

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

Votre fonction d'envoi dans jQuery ressemblerait à ceci:

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

pour ajouter des données à votre formulaire, vous pouvez utiliser une entrée masquée dans votre formulaire ou l'ajouter à la volée:

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