web-dev-qa-db-fra.com

Soumission d'un formulaire HTML à l'aide de Jquery AJAX

J'essaie 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 script:

<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 souhaite pas rediriger vers une autre page, je souhaite simplement afficher le message d'alerte.

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

PS: J'ai plusieurs domaines, je viens de citer deux exemples.

jqueryajaxform-submit
97
Oliveira

Description rapide d'AJAX

AJAX est tout simplement Javascript ou XML asynchrone (dans la plupart des situations plus récentes, JSON). Comme nous effectuons une tâche ASYNC, nous offrirons probablement à nos utilisateurs une expérience d’interface utilisateur plus agréable. Dans ce cas particulier, nous effectuons une soumission de formulaire en utilisant AJAX.

Très rapidement, il y a 4 actions Web générales GET, POST, PUT et DELETE; ceux-ci correspondent directement à SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA et DELETING DATA. Un formulaire HTML/ASP.Net web/PHP/Python ou toute autre action form par défaut consiste à "submit", ce qui correspond à une action POST. Pour cette raison, les éléments ci-dessous décrivent tous comment effectuer 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):

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <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>
<script type='text/javascript'>
    /* 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 ) {
        alert('success');
      });
    });
</script>

</body>
</html>

Documentation

Site Web jQuery $.post documentation.

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

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

Exemple : Publiez un formulaire avec ajax et placez 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 élément lié à PCI, HIPAA ou à la connexion).

164
abc123
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);
            }
        })
26
Varun S

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 FILE INPUTS ... ajaxForm ().

3
Martin Zvarík