Wie erfasse ich die Antwort von form.submit?

Ich habe folgenden Code:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Ich möchte die HTML-Antwort von erfassen form1.submit? Wie mache ich das? Kann ich eine Rückruffunktion für die Methode form1.submit registrieren?

Mit einfachem Javascript können Sie dies nicht einfach tun. Wenn Sie ein Formular veröffentlichen, werden die Formulareingaben an den Server gesendet und Ihre Seite wird aktualisiert - die Daten werden auf der Serverseite verarbeitet. Das heißt, die submit()Funktion gibt eigentlich nichts zurück, sondern sendet nur die Formulardaten an den Server.

Wenn Sie wirklich die Antwort in Javascript (ohne die Seite zu aktualisieren) wollen bekommen, dann müssen Sie AJAX verwenden, und wenn Sie über die Verwendung von AJAX zu sprechen beginnen, werden Sie brauchen , um eine Bibliothek zu verwenden. jQuery ist bei weitem das beliebteste und mein persönlicher Favorit. Es gibt ein großartiges Plugin für jQuery namens Form, das genau das tut, wie es sich anhört.

So würden Sie jQuery und dieses Plugin verwenden:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Eine Ajax-Alternative besteht darin, ein Unsichtbares <iframe>als Ziel Ihres Formulars festzulegen und dessen Inhalt <iframe>in seinem onloadHandler zu lesen . Aber warum sich die Mühe machen, wenn es Ajax gibt?

Hinweis: Ich wollte nur diese Alternative zu erwähnen , da einige der Antworten behaupten , dass es unmöglich dies ohne Ajax zu erreichen.

Die Nicht-jQuery-Vanille-Javascript-Methode, extrahiert aus dem Kommentar von 12me21:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Für POST's ist der Standardinhaltstyp "application / x-www-form-urlencoded", der dem entspricht, was wir im obigen Snippet senden. Wenn Sie "anderes Zeug" senden oder es irgendwie optimieren möchten, finden Sie hier einige Details.

Ich mache es so und es funktioniert.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

Zukünftige Internet-Sucher:

Für neue Browser (ab 2018: Chrome, Firefox, Safari, Opera, Edge und die meisten mobilen Browser, jedoch nicht IE) fetchist eine Standard-API, die asynchrone Netzwerkaufrufe vereinfacht (für die wir früher XMLHttpRequestoder jQuerys benötigt haben $.ajax).

Hier ist eine traditionelle Form:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Wenn Ihnen ein Formular wie das oben genannte übergeben wird (oder Sie es erstellt haben, weil es semantisches HTML ist), können Sie den fetchCode wie folgt in einen Ereignis-Listener einschließen:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Wenn Sie es wie das Originalposter manuell ohne Übermittlungsereignis aufrufen möchten, geben Sie einfach den fetchCode dort ein und übergeben Sie einen Verweis auf das formElement, anstatt es zu verwenden event.target.)

Docs:

Abrufen: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Sonstiges: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Auf dieser Seite im Jahr 2018 wird Fetch (noch) nicht erwähnt. Es wird jedoch erwähnt, dass der Trick target = "myIFrame" veraltet ist. Außerdem gibt es ein Beispiel für form.addEventListener für das Ereignis 'submit'.

Ich bin nicht sicher, ob Sie verstehen, was submit () tut ...

Wenn Sie dies tun, werden form1.submit();die Formularinformationen an den Webserver gesendet.

Der WebServer wird alles tun, was er tun soll, und eine brandneue Webseite an den Client zurücksenden (normalerweise dieselbe Seite mit etwas Geändertem).

Es gibt also keine Möglichkeit, die Rückgabe einer form.submit () -Aktion zu "fangen".

Es erfolgt kein Rückruf. Es ist wie einem Link zu folgen.

Wenn Sie die Serverantwort erfassen möchten, verwenden Sie AJAX oder senden Sie sie an einen Iframe und holen Sie sich, was dort nach dem onload()Ereignis des Iframes angezeigt wird .

Sie können event.preventDefault()im Klick-Handler für Ihre Senden-Schaltfläche sicherstellen, dass das Standardereignis des HTML-Formulars submitnicht ausgelöst wird (was zur Aktualisierung der Seite führt).

Eine andere Alternative wäre die Verwendung von Hacker Form Markup: Es ist die Verwendung von <form>und type="submit"das behindert das gewünschte Verhalten hier; da diese letztendlich zu Klickereignissen führen, die die Seite aktualisieren.

Wenn Sie noch verwenden wollen <form>, und Sie wollen nicht , benutzerdefinierte schreiben Handler klicken, können Sie jQuery verwenden ajaxMethode, die das gesamte Problem weg für Sie abstrahiert von Versprechen Verfahren auszusetzen für success, errorusw.

Um es noch einmal zusammenzufassen: Sie können Ihr Problem folgendermaßen lösen:

• Verhindern des Standardverhaltens in der Handhabungsfunktion durch Verwenden von event.preventDefault()

• Verwenden von Elementen ohne Standardverhalten (z. B. <form>)

• Verwenden von jQuery ajax

(Ich habe gerade bemerkt, dass diese Frage aus dem Jahr 2008 stammt und nicht sicher ist, warum sie in meinem Feed angezeigt wurde. Auf jeden Fall ist dies hoffentlich eine klare Antwort.)

Dies ist mein Code für dieses Problem:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </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()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

Wenn Sie die Ausgabe einer AJAX-Anfrage mit Chrome erfassen möchten, können Sie die folgenden einfachen Schritte ausführen:

1. Öffnen Sie die Programmierer-Toolbox
2. Gehen Sie zur Konsole und direkt darin
3. Klicken Sie im angezeigten Menü auf "XMXHTTPRequest-Protokollierung aktivieren".
4. Danach wird jedes Mal, wenn Sie eine AJAX-Anfrage stellen, eine Meldung in Ihrer Konsole angezeigt, die mit "XHR beendet das Laden beendet: http: // ......" beginnt.
5. Wenn Sie auf den angezeigten Link klicken, wird die Registerkarte "Ressourcen" angezeigt, auf der Sie die Überschriften und den Inhalt der Antwort sehen können!

    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

Aufbauend auf der Antwort von @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ) behandle ich Fehler und Erfolge bei Formularbeiträgen:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Ich verwende thisdies, damit meine Logik wiederverwendbar ist. Ich erwarte, dass HTML bei einem Erfolg zurückgegeben wird, also rendere ich es und ersetze die aktuelle Seite. In meinem Fall erwarte ich eine Umleitung zur Anmeldeseite, wenn die Sitzung abgelaufen ist Ich fange diese Weiterleitung ab, um den Status der Seite beizubehalten.

Jetzt können sich Benutzer über eine andere Registerkarte anmelden und ihre Übermittlung erneut versuchen.

Sie müssen AJAX verwenden. Das Senden des Formulars führt normalerweise dazu, dass der Browser eine neue Seite lädt.

Sie können dies mit Javascript und AJAX-Technologie tun. Schauen Sie sich jquery und dieses Formular-Plug-In an . Sie müssen nur zwei js-Dateien einschließen, um einen Rückruf für form.submit zu registrieren.

Sie können dies mit jQuery und der folgenden ajax()Methode erreichen:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>

 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

Verwenden Sie zuerst $ (document) .ready (function ()) innerhalb dieser Verwendung ('formid'). submit (function (event)) und verhindern Sie dann die Standardaktion nach dem Aufruf der Ajax-Formularübermittlung $ .ajax ({,,,, ,}); Es wird ein Parameter benötigt, den Sie entsprechend Ihrer Anforderung auswählen können. Rufen Sie dann einen Funktionserfolg auf: function (data) {// tun Sie, was immer Sie wollen, mein Beispiel setzt die Antwort html auf div}

Zunächst benötigen wir serializeObject ();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Dann machst du einen einfachen Beitrag und bekommst eine Antwort

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

Ich habe folgenden Code perfekt mit Ajax mit mehrteiligen Formulardaten ausgeführt

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

Sie können jQuery.post () verwenden und gut strukturierte JSON-Antworten vom Server zurückgeben. Außerdem können Sie Ihre Daten direkt auf dem Server validieren / bereinigen. Dies ist eine gute Vorgehensweise, da dies sicherer (und sogar einfacher) ist als dies auf dem Client.

Zum Beispiel, wenn Sie ein HTML-Formular mit Benutzerdaten zur einfachen Registrierung auf dem Server (in saveprofilechanges.php) veröffentlichen müssen:

I. Kundenteile:

Ia HTML-Teil:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Ib Skriptteil:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Serverteil (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

Sie können das ohne Ajax tun.

schreibe dein Like unten.

.. .. ..

und dann in "action.php"

dann nach frmLogin.submit ();

Variable $ submit_return lesen ..

$ submit_return enthält den Rückgabewert.

Viel Glück.