Senden des HTML-Formulars mit Jquery AJAX

107

Ich versuche mit diesem Beispiel ein HTML-Formular mit AJAX zu senden .

Mein HTML-Code:

<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>

Mein Skript:

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

Dies funktioniert nicht, ich erhalte nicht einmal die Warnmeldung und wenn ich sende, möchte ich nicht auf eine andere Seite umleiten, sondern nur die Warnmeldung anzeigen.

Gibt es eine einfache Möglichkeit, dies zu tun?

PS: Ich habe mehrere Felder, ich habe nur zwei als Beispiel angeführt.

jquery ajax form-submit Oliveira
quelle

Kannst du die HTML-Komponente "form" nicht abschaffen? und benutze jquery, um auf dem Click-Handler von come button zu

posten

Antworten:

177

Kurzbeschreibung von AJAX

AJAX ist einfach asynchrones JSON oder XML (in den meisten neueren Situationen JSON). Da wir eine ASYNC-Aufgabe ausführen, werden wir unseren Benutzern wahrscheinlich eine angenehmere Benutzeroberfläche bieten. In diesem speziellen Fall führen wir eine FORM-Übermittlung mit AJAX durch.

Wirklich schnell gibt es 4 allgemeine Web - Aktionen GET, POST, PUT, und DELETE; diese entsprechen direkt mit SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, und DELETING DATA. Ein Standard-HTML / ASP.Net-Webformular / PHP / Python oder eine andere formAktion ist das " Senden ", bei dem es sich um eine POST-Aktion handelt. Aus diesem Grund wird im Folgenden beschrieben, wie ein POST durchgeführt wird. Manchmal möchten Sie jedoch mit http möglicherweise eine andere Aktion und möchten diese wahrscheinlich nutzen .ajax.

Mein Code speziell für Sie (beschrieben in Codekommentaren):

/* 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>

Erweitern Sie das Snippet

Dokumentation

Aus der $.postDokumentation der jQuery-Website .

Beispiel : Senden Sie Formulardaten mit Ajax-Anforderungen

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

Beispiel : Veröffentlichen Sie ein Formular mit Ajax und geben Sie die Ergebnisse in ein div ein

<!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>

Wichtige Notiz

Verwenden Sie diese Methode ohne Verwendung von OAuth oder mindestens HTTPS (TLS / SSL) nicht für sichere Daten (Kreditkartennummern, SSN, PCI, HIPAA oder Login).

abc123
quelle

@ abc123 Wie kann ich hier den Header für Autorisierungsanfragen festlegen? Ich habe versucht,

beforeSend: function (xhr) 			{ 				xhr.setRequestHeader("Authorization", "*****"); 				xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); 			},

aber dies setzt keinen Header

Mahendra Kawde

@ Mahendrakawde Sie müssten verwenden, von $.ajaxdem ich ein Beispiel schreiben kann, wenn Sie

möchten,

@ abc123 Ich habe Thread dafür initiiert. Lass es mich mit dir teilen.

Mahendra Kawde

Können wir die Verwendung von Formularpost überhaupt vermeiden und einfach einen Abfrage-Post für den Klick-Handler einer Schaltfläche (die eine HTML-Schaltfläche ist, die nicht Teil eines Formular-Div ist) ausführen? Auf diese Weise wird event.preventdefault auch nicht benötigt?

Roughvchawla

@harshvchawla natürlich, aber dann ist Ihre Auswahlabfrage für die Variablen aus dem HTML-Element anders

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);
            }
        })

Varun S.
quelle

Die Erfolgs- / Abschlussfunktion wird ausgeführt, wenn der Anruf abgeschlossen ist und vom Server ein 200 OK erhalten wird

Varun S

hi ich setze: $ (document) .ready (function () {$ ('# formoid'). submit (function () {var postData = "text"; $ .ajax ({type: "post", url: " URL ", Daten: postData, contentType:" studentFormInsert.php ", Erfolg: Funktion (responseData, textStatus, jqXHR) {alert (" Daten gespeichert ")}, Fehler: Funktion (jqXHR, textStatus, errorThrown) {console.log ( errorThrown);}})}); es funktioniert eigentlich nicht .. ist eine Änderung auf der PHP-Seite erforderlich?

Oliveira

gutes Beispiel und gut geschrieben, bitte posten Sie eine Antwort damit, aber nicht nur Beispielcode ohne Erklärung.

abc123

Ich verstehe nicht, wie ich das mit dem Formular verbinden soll, das ich posten möchte

Piotr Kamoda

Warum gibt es keine Erklärung?

Rich

Wenn Sie hinzufügen:

jquery.form.min.js

Sie können dies einfach tun:

<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>

HINWEIS:

Sie könnten einfach $ ('FORM'). Serialize () verwenden, wie im obigen Beitrag vorgeschlagen, aber das funktioniert nicht für FILE INPUTS ... ajaxForm ().

Martin Zvarík
quelle