Question jQuery AJAX soumettre le formulaire


J'ai un formulaire avec nom orderproductForm et un nombre indéfini d'entrées.

Je veux faire une sorte de jQuery.get ou ajax ou quelque chose comme ça qui appelle une page à travers Ajax, et envoyer le long de toutes les entrées de la forme orderproductForm.

Je suppose que l'one-way serait de faire quelque chose comme

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

Cependant, je ne connais pas exactement toutes les entrées de formulaire. Y a-t-il une fonctionnalité, une fonction ou quelque chose qui enverrait TOUTES les entrées de formulaire?


738
2017-12-25 01:31


origine


Réponses:


Vous pouvez utiliser les fonctions ajaxForm / ajaxSubmit de Ajax Form Plugin ou la fonction de sérialisation jQuery.

AjaxForm:

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

ou

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm envoie lorsque le bouton de soumission est appuyé. ajaxSubmit envoie immédiatement.

Sérialiser:

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

La documentation de sérialisation AJAX est ici.


687
2017-12-25 01:36



C'est une référence simple:

// this is the id of the form
$("#idForm").submit(function(e) {


    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

J'espère que ça t'aide.


1089
2017-08-05 17:57



Une autre solution similaire utilisant des attributs définis sur l'élément de formulaire:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

421
2018-05-07 12:44



Il y a quelques choses que vous devez garder à l'esprit.

1. Il y a plusieurs façons de soumettre un formulaire

  • en utilisant le bouton submit
  • en appuyant sur Entrée
  • en déclenchant un événement submit en JavaScript
  • peut-être plus en fonction de l'appareil ou du futur appareil.

Nous devrions donc nous lier à formulaire soumettre un événement, pas l'événement de clic de bouton. Cela permettra à notre code de fonctionner sur tous les appareils et technologies d'assistance, maintenant et dans le futur.

2. Hijax

L'utilisateur n'a peut-être pas activé JavaScript. UNE hijax Le motif est bon ici, où nous prenons le contrôle du formulaire en utilisant JavaScript, mais laissons-le soumettre si le JavaScript échoue.

Nous devrions extraire l'URL et la méthode du formulaire, donc si le HTML change, nous n'avons pas besoin de mettre à jour le JavaScript.

3. JavaScript discret

En utilisant event.preventDefault () au lieu de return false est une bonne pratique car elle permet à l'événement d'exploser. Cela permet à d'autres scripts de se lier à l'événement, par exemple des scripts d'analyse qui peuvent surveiller les interactions de l'utilisateur.

La vitesse

Nous devrions idéalement utiliser un script externe, plutôt que d'insérer notre script en ligne. Nous pouvons créer un lien vers ceci dans la section head de la page en utilisant un tag de script, ou un lien vers celui-ci au bas de la page pour plus de rapidité. Le script devrait tranquillement améliorer l'expérience de l'utilisateur, ne pas gêner.

Code

En supposant que vous êtes d'accord avec tout ce qui précède, et que vous voulez attraper l'événement submit, et le gérer via AJAX (un motif hijax), vous pouvez faire quelque chose comme ceci:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

Vous pouvez déclencher manuellement une soumission de formulaire lorsque vous le souhaitez via JavaScript en utilisant quelque chose comme:

$(function() {
  $('form.my_form').trigger('submit');
});

Modifier:

J'ai récemment dû le faire et j'ai fini par écrire un plugin.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

Ajoutez un attribut data-autosubmit à votre balise de formulaire et vous pouvez ensuite:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

162
2018-01-19 18:52



Vous pouvez aussi utiliser Données de formulaire (Mais pas disponible dans IE):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

C'est comme ça que vous utilisez Données de formulaire.


26
2017-07-10 09:35



Version simple (n'envoie pas d'images)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

Copiez et collez l'ajaxification d'un formulaire ou de tous les formulaires sur une page

C'est une version modifiée de Alfrekjv répondre

  • Cela fonctionnera avec jQuery> = 1.3.2
  • Vous pouvez l'exécuter avant que le document ne soit prêt
  • Vous pouvez supprimer et rajouter le formulaire et cela fonctionnera toujours
  • Il affichera au même endroit que le formulaire normal, spécifié dans l'attribut "action" du formulaire

JavaScript

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Je voulais éditer la réponse d'Alfrekjv, mais en ai trop dévié. J'ai donc décidé de publier cette réponse séparément.

N'envoie pas de fichiers, ne supporte pas les boutons, par exemple en cliquant sur un bouton (y compris un bouton d'envoi) envoie sa valeur comme données de formulaire, mais comme il s'agit d'une requête ajax, le clic ne sera pas envoyé.

Pour prendre en charge les boutons, vous pouvez capturer le bouton réel au lieu de l'envoyer.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

Du côté serveur, vous pouvez détecter une requête ajax avec cet en-tête que jquery définit HTTP_X_REQUESTED_WITH pour php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

24
2018-02-07 19:35



Ce code fonctionne même avec une entrée de fichier

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

20
2017-11-12 23:06