Soumettre un formulaire HTML à l'aide de Jquery AJAX

107

Im essayant de soumettre un formulaire HTML en utilisant AJAX en utilisant cet exemple .

Mon code HTML:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Mon scénario:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

Cela ne fonctionne pas, je ne reçois même pas le message d'alerte et lorsque je soumets, je ne veux pas rediriger vers une autre page, je veux juste afficher le message d'alerte.

Y a-t-il un moyen simple de le faire?

PS: J'ai plusieurs champs, je viens d'en mettre deux à titre d'exemple.

jquery ajax form-submit Oliveira
la source
ne pouvez-vous pas faire disparaître le composant HTML "formulaire"? et utilisez jquery pour publier sur le gestionnaire de clic du bouton
Come

Réponses:

178

Description rapide d'AJAX

AJAX est simplement JSON ou XML asynchrone (dans la plupart des situations plus récentes JSON). Parce que nous effectuons une tâche ASYNC, nous fournirons probablement à nos utilisateurs une expérience d'interface utilisateur plus agréable. Dans ce cas précis, nous effectuons une soumission FORM en utilisant AJAX.

Très rapidement , il y a 4 actions web générales GET, POST, PUTet DELETE; ceux - ci correspondent directement avec SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATAet DELETING DATA. Un formulaire Web HTML / ASP.Net / PHP / Python par défaut ou toute autre formaction consiste à «soumettre», qui est une action POST. Pour cette raison, tout ce qui suit décrit la réalisation d'un POST. Parfois, cependant, avec http, vous voudrez peut-être une action différente et voudrez probablement utiliser.ajax .

Mon code spécialement pour vous (décrit dans les commentaires du code):

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>
Développer l'extrait

Documentation

À partir de la $.postdocumentation du site Web jQuery .

Exemple : envoyer des données de formulaire à l'aide de requêtes ajax

$.post("test.php", $("#testform").serialize());

Exemple : publier un formulaire en utilisant ajax et mettre les résultats dans un div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Note importante

Sans utiliser OAuth ou au minimum HTTPS (TLS / SSL), veuillez ne pas utiliser cette méthode pour des données sécurisées (numéros de carte de crédit, SSN, tout ce qui est PCI, HIPAA ou lié à la connexion)

abc123
la source
@ abc123 comment puis-je définir l'en-tête de demande d'autorisation dans ce domaine? J'ai essayé beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "*****"); xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); },mais cela ne définit aucun en-tête
mahendra kawde
@mahendrakawde vous auriez besoin d'utiliser $.ajaxce dont je peux écrire un exemple si vous le souhaitez, mais c'est vraiment une question distincte
abc123
@ abc123 J'ai un thread lancé pour cela. laissez-moi le partager avec vous.
mahendra kawde
1
pouvons-nous éviter d'utiliser la publication de formulaire et simplement faire une publication jquery sur le gestionnaire de clic d'un bouton (qui est un bouton html ne faisant partie d'aucune division de formulaire). De cette façon, event.preventdefault ne sera pas non plus nécessaire?
harshvchawla
1
@harshvchawla bien sûr, mais votre requête de sélection pour les variables extraites de l'élément html est différente
abc123
26 
var postData = "text";
      $.ajax({
            type: "post",
            url: "url",
            data: postData,
            contentType: "application/x-www-form-urlencoded",
            success: function(responseData, textStatus, jqXHR) {
                alert("data saved")
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        })
Varun S
la source
1
la fonction succès / complet se produira lorsque l'appel sera terminé et qu'il recevra un 200 OK du serveur
Varun S
salut j'ai mis: $ (document) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " url ", data: postData, contentType:" studentFormInsert.php ", success: function (responseData, textStatus, jqXHR) {alert (" data saved ")}, error: function (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); ça ne fonctionne pas en fait .. une modification du côté php est nécessaire?
Oliveira
4
bon exemple et bien écrit, veuillez poster une réponse mais pas seulement un exemple de code sans explication.
abc123
2
Je ne sais pas comment connecter cela avec le formulaire que je souhaite publier
Piotr Kamoda
Pourquoi n'y a-t-il pas d'explication?
Rich
3

Si vous ajoutez:

jquery.form.min.js

Vous pouvez simplement faire ceci:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

REMARQUE:

Vous pouvez utiliser un simple $ ('FORM'). Serialize () comme suggéré dans l'article ci-dessus, mais cela ne fonctionnera pas pour les ENTRÉES DE FICHIER ... ajaxForm () le fera.

Martin Zvarík
la source