soumettre le formulaire à l'aide d'ajax

Ce sujet

$.ajax({
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //or your custom data either as object {foo: "bar", ...} or foo=bar&...
  success: function(response) { ... },
});

OriginalL'auteur David Müller

@insaner méthode est bonne, cependant, vous avez à construire la chaîne de requête manuellement, ce qui est assez problématique et inutile. Voici une solution universelle qui parcourt chaque champ de formulaire et crée la chaîne de demande automatiquement:

document.querySelector('#contact-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var data = new FormData(this); //create new FormData object
    data = data.entries();
    var obj = data.next(); //access Iterator
    var retrieved = {};
    while(undefined !== obj.value) {    
        retrieved[obj.value[0]] = obj.value[1];
        obj = data.next();
    } //parse FormData into simple Object

    //at this point might occur some custom validation based on retrieved Object

    var XHR = new XMLHttpRequest();
    var urlEncodedData = "";
    var urlEncodedDataPairs = [];

    for(var name in retrieved) {
        urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(retrieved[name]));
    }
    urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+'); //parse object into urlEncoded String

    XHR.addEventListener('load', function(event) {
        console.log('Data sent.');
    });
    XHR.addEventListener('error', function(event) {
        console.log('Oops! Something goes wrong.');
    });

    XHR.open('POST', 'contact.php');
    XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    XHR.send(urlEncodedData); //send the form
});

Mise à jour

Voici une version alternative en utilisant de nouveaux aller chercher de l'API. Lit automatiquement les attributs de forme: method et action et s'empare de tous les champs à l'intérieur de la forme. Soutien à une seule dimension de la matrice de champs, comme emails[]. Pourrait servir de solution universelle pour gérer facilement un grand nombre (peut-être dynamique) les formes avec une seule source de vérité - html.

document.querySelector('.ajax-form').addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    let parsedData = {};
    for(let name of formData) {
      if (typeof(parsedData[name[0]]) == "undefined") {
        let tempdata = formData.getAll(name[0]);
        if (tempdata.length > 1) {
          parsedData[name[0]] = tempdata;
        } else {
          parsedData[name[0]] = tempdata[0];
        }
      }
    }

    let options = {};
    switch (this.method.toLowerCase()) {
      case 'post':
        options.body = JSON.stringify(parsedData);
      case 'get':
        options.method = this.method;
        options.headers = {'Content-Type': 'application/json'};
      break;
    }

    fetch(this.action, options).then(r => r.json()).then(data => {
      console.log(data);
    });
});

<form method="POST" action="some/url">
    <input name="emails[]">
    <input name="emails[]">
    <input name="emails[]">
    <input name="name">
    <input name="phone">
</form>

OriginalL'auteur Maciej Kwas

Il est beaucoup plus facile de simplement utiliser jQuery, puisque c'est juste une tâche pour l'université et vous n'avez pas besoin d'enregistrer le code.

Donc, votre code ressemblera à:

function sendMyComment() {
    $('#addComment').append('<input type="hidden" name="video_id" id="video_id" value="' + $('#video_id').text() + '"/><input type="hidden" name="video_time" id="video_time" value="' + $('#time').text() +'"/>');
    $.ajax({
        type: 'POST',
        url: $('#addComment').attr('action'),
        data: $('form').serialize(), 
        success: function(response) { ... },
    });

}

OriginalL'auteur Varvara Stepanova