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

J'ai une fonction jQuery ajax et je voudrais soumettre un formulaire entier en tant que données de publication. Nous mettons constamment à jour le formulaire, il devient donc fastidieux de constamment mettre à jour les entrées de formulaire qui doivent être envoyées dans la demande.

Il y a une fonction qui fait exactement cela:

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

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

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

Supposons que nous ayons un formulaire avec cet identifiant: "myform".

la meilleure solution est de créer un FormData et de 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
        }
    });

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

Veuillez noter 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 comprend plusieurs occurrences du même paramètre de requête:

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

ce qui n'est peut-être pas 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 de discussion 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 comme ceci:

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

J'espère que cela pourra aider.

Utilisation

sérialiser ()

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

Sérialisez un formulaire en une chaîne de requête, qui pourrait être envoyée à un serveur dans une requête Ajax.

Une bonne option jQuery pour ce faire est via FormData . Cette méthode est également adaptée 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 soit utiliser une entrée masquée dans votre formulaire, soit l'ajouter à la volée:

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

Il vous suffit de publier les données. et Utilisation des paramètres de jeu de fonction 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>

Les autres solutions n'ont pas fonctionné 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)
        }
    });
}