it-swarm.com.de

XMLHttpRequest zum Bereitstellen eines HTML-Formulars

Aktuelles Setup

Ich habe so ein HTML-Formular.

<form id="demo-form" action="POST" method="post-handler.php">
   <input type="text" name="name" value="previousValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

Ich habe viele dieser Formulare auf einer Seite.

Meine Frage  

Wie sende ich dieses Formular asynchron und bekomme keine Weiterleitung oder Aktualisierung der Seite? Ich weiß, wie man XMLHttpRequest verwendet. Das Problem, das ich habe, ist das Abrufen der Daten aus dem HTML-Code in Javascript, um sie dann in einen Post-Request-String einzufügen. Hier ist die Methode, die ich derzeit für meine zXMLHttpRequest-Methode verwende.

function getHttpRequest() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xmlhttp;
}

function demoRequest() {
       var request = getHttpRequest();
       request.onreadystatechange=function() {
             if (request.readyState == 4 && request.status == 200) {
                   console.log("Response Received");
             }
       }
       request.open("POST","post-handler.php",true);
       request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
       request.send("action=dosomething");
}

So wurde zum Beispiel die Javascript-Methode demoRequest() aufgerufen, wenn auf die Schaltfläche "Abschicken" des Formulars geklickt wurde. Wie kann ich mit dieser Methode auf die Werte des Formulars zugreifen, um es dann der XMLHttpRequest hinzuzufügen?

EDIT

Beim Versuch, eine Lösung aus einer Antwort unten zu implementieren, habe ich mein Formular so geändert.

<form id="demo-form">
       <input type="text" name="name" value="previousValue"/>
       <button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>

Wenn Sie jedoch auf die Schaltfläche klicken, wird immer noch versucht, mich umzuleiten (dorthin, wo ich unsicher bin) und meine Methode wird nicht aufgerufen.

Button Event Listener

document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                evt.preventDefault();

                                // Do something
                                updateProperties();

                                return false;
                            });
16
StuStirling

Das Zeichenfolgeformat POST ist das folgende:

name=value&name2=value2&name3=value3


Sie müssen also alle Namen und ihre Werte in dieses Format packen .__ Sie können entweder alle Eingabeelemente wiederholen oder bestimmte aufrufen, indem Sie document.getElementById() aufrufen.

Warnung: Sie müssen encodeURIComponent() für alle Namen und insbesondere für die Werte verwenden, damit mögliche & in den Zeichenfolgen das Format nicht beschädigen.

Beispiel:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

Eine weitaus einfachere Option wäre die Verwendung von FormData-Objekten. Ein solches Objekt kann Namens- und Wertepaare enthalten.

Glücklicherweise können wir ein FormData-Objekt aus einem vorhandenen Formular erstellen und es direkt an XMLHttpRequests Methode send () senden:

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);
24
ComFreek

Die Antwort von ComFreek ist korrekt, aber ein vollständiges Beispiel fehlt. 

Deshalb habe ich einen extrem vereinfachten Arbeitsausschnitt geschrieben:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>

<script>
"use strict";
function submitForm(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onload = function(){ alert (xhr.responseText); }
  xhr.open (oFormElement.method, oFormElement.action, true);
  xhr.send (new FormData (oFormElement));
  return false;
}
</script>
</head>

<body>
<form method="POST"
      action="post-handler.php"
      onsubmit="return submitForm(this);" >
   <input type="text" name="name" value="previousValue"/>
   <input type="submit"           value="Update"/>
</form>
</body>
</html>

Dieses Snippet ist grundlegend und kann GET nicht verwenden. Ich wurde von der ausgezeichneten Mozilla-Dokumentation inspiriert. Lesen Sie diese MDN-Dokumentation ausführlicher, um mehr zu tun. Siehe auch diese Antwort mit formAction

11
olibre

Ich habe übrigens den folgenden Code verwendet, um ein Formular in einer Ajax-Anfrage zu übermitteln.

 $('form[id=demo-form]').submit(function (event) {

    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");


    // serialize the data in the form
    var serializedData = $form.serialize();


    // fire off the request to specific url

    var request = $.ajax({
        url : "URL TO POST FORM",
        type: "post",
        data: serializedData
    });
    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){


    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){

    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs

    });

    // prevent default posting of form
    event.preventDefault();
});
2
Awais Qarni

Mit reinem Javascript wollen Sie einfach so etwas wie:

var val = document.getElementById("inputFieldID").value;

Sie möchten ein data -Objekt zusammenstellen, das Schlüssel-Wert-Paare enthält, ähnlich wie 

name=John&lastName=Smith&age=3

Dann sende es mit request.send ("name = John & lastName = Smith & age = 3");  

0
Zlatko

Ich habe dieses Problem auch gehabt, denke ich.

Ich habe ein Eingabeelement mit einer Schaltfläche. Die onclick-Methode der Schaltfläche verwendet XMLHTTPRequest für POST eine Anforderung an den Server, die alle im JavaScript codiert sind.

Wenn ich die Eingabe und die Schaltfläche in ein Formular eingepackt habe, wurde die Aktionseigenschaft des Formulars verwendet. Die Schaltfläche lautete nichttype=submit, was mein Lesen des HTML-Standards ( https://html.spec.whatwg.org/#attributes-for-form-submission ) darstellt.

Aber ich löste es, indem ich die form.onsubmit-Methode wie folgt überschreibe:

form.onsubmit = function(E){return false;}

Ich habe FireFox Developer Edition und Chrom 38.0.2125.111 Ubuntu 14.04 (290379) (64-Bit) verwendet.

0
Worik