senden Sie das Formular mit ajax

Entwickle ich eine Anwendung (eine Art Soziales Netzwerk für meine Universität). Ich muss einen Kommentar hinzufügen (einfügen einer Zeile in einer bestimmten Datenbank). Um dies zu tun, ich habe ein HTML-Formular in meine html-Seite mit verschiedenen Feldern. Zum Zeitpunkt der reichen ich glaube nicht, verwenden Sie die Aktion Formular, aber ich benutze eine benutzerdefinierte javascript-Funktion, um aufwändige einige Daten vor dem Absenden.

function sendMyComment() {

    var oForm = document.forms['addComment'];
    var input_video_id = document.createElement("input");
    var input_video_time = document.createElement("input");

    input_video_id.setAttribute("type", "hidden");
    input_video_id.setAttribute("name", "video_id");
    input_video_id.setAttribute("id", "video_id");
    input_video_id.setAttribute("value", document.getElementById('video_id').innerHTML);

    input_video_time.setAttribute("type", "hidden");
    input_video_time.setAttribute("name", "video_time");
    input_video_time.setAttribute("id", "video_time");
    input_video_time.setAttribute("value", document.getElementById('time').innerHTML);

    oForm.appendChild(input_video_id);
    oForm.appendChild(input_video_time);

    document.forms['addComment'].submit();
}

Der letzten Zeile das Formular absendet, um die richtige Seite. Es funktioniert einwandfrei. Aber ich würde gerne ajax verwenden, die für die Einreichung der form, und ich habe keine Ahnung, wie zu tun, weil ich habe keine Ahnung, wie catch-form-input-Werte. wer kann mir helfen?

InformationsquelleAutor Alessio Melani | 2012-11-28
  1. 26

    Niemand hat tatsächlich eine Reine javascript Antwort (wie gefordert durch die OP), so ist es hier:

    function postAsync(url2get, sendstr)    {
    var req;
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }
    if (req != undefined) {
        //req.overrideMimeType("application/json"); //if request result is JSON
        try {
            req.open("POST", url2get, false); //3rd param is whether "async"
            }
        catch(err) {
            alert("couldnt complete request. Is JS enabled for that domain?\\n\\n" + err.message);
            return false;
            }
        req.send(sendstr); //param string only used for POST

        if (req.readyState == 4) { //only if req is "loaded"
            if (req.status == 200)  //only if "OK"
                { return req.responseText ; }
            else    { return "XHR error: " + req.status +" "+req.statusText; }
            }
        }
    alert("req for getAsync is undefined");
}

var var_str = "var1=" + var1  + "&var2=" + var2;
var ret = postAsync(url, var_str) ;
    //hint: encodeURIComponent()

if (ret.match(/^XHR error/)) {
    console.log(ret);
    return;
    }

    In Ihrem Fall:

    var var_str = "video_time=" + document.getElementById('video_time').value 
     + "&video_id=" + document.getElementById('video_id').value;
    • Kleinere Fehler - Sie haben die Methode aufgerufen 'postAsync', wenn es tatsächlich funktioniert synchron (das async-Attribut der Anfrage festgelegt ist, 'false')
    • guten Fang. Dies wurde geändert von code, den ich eigentlich verwenden, irgendwann ich glaube es war bestimmbaren parameter für die Funktion. Ich denke, ich habe einfach nie geändert, dass ein Teil des namens der Funktion.
    • Ich hatte, um req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); damit Sie richtig funktionieren.
    • ja, es hängt viel von den Daten, die Sie immer wieder zurück. Sie müssen möglicherweise geben Sie "application/json" wenn Sie empfangen von JSON-formatierten text zum Beispiel.
    InformationsquelleAutor insaner
  2. 19

    Was

    $.ajax({
  type: 'POST',
  url: $("form").attr("action"),
  data: $("form").serialize(), 
  //or your custom data either as object {foo: "bar", ...} or foo=bar&...
  success: function(response) { ... },
});
    • Warum brauchen wir, um es zu serialisieren?
    InformationsquelleAutor David Müller
  3. 10

    Können Sie eine onclick-Funktion auf Ihrer submit-button, aber Sie werden nicht in der Lage, senden Sie Ihre Funktion durch drücken der EINGABETASTE. Für meinen Teil, benutze ich dieses:

    <form action="" method="post" onsubmit="your_ajax_function(); return false;">
    Your Name <br/>
    <input type="text" name="name" id="name" />
    <br/>
    <input type="submit" id="submit" value="Submit" />
</form>

    Hoffe, es hilft.

    InformationsquelleAutor pmrotule
  4. 5

    Hier ist eine Universelle Lösung, durchläuft jedes Feld in der form und erzeugt den request-string automatisch. Es ist mit neuen fetch API. Liest automatisch form-Attribute: method und action und packt alle Felder innerhalb des Formulars. Unterstützung des single-dimension array-Felder, wie emails[]. Als Universelle Lösung zur einfachen Verwaltung viele (möglicherweise dynamische) Formen mit " single source of truth - html.

    document.querySelector('.ajax-form').addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);
    let parsedData = {};
    for(let name of formData) {
      if (typeof(parsedData[name[0]]) == "undefined") {
        let tempdata = formData.getAll(name[0]);
        if (tempdata.length > 1) {
          parsedData[name[0]] = tempdata;
        } else {
          parsedData[name[0]] = tempdata[0];
        }
      }
    }

    let options = {};
    switch (this.method.toLowerCase()) {
      case 'post':
        options.body = JSON.stringify(parsedData);
      case 'get':
        options.method = this.method;
        options.headers = {'Content-Type': 'application/json'};
      break;
    }

    fetch(this.action, options).then(r => r.json()).then(data => {
      console.log(data);
    });
});

<form method="POST" action="some/url">
    <input name="emails[]">
    <input name="emails[]">
    <input name="emails[]">
    <input name="name">
    <input name="phone">
</form>
    InformationsquelleAutor Maciej Kwas
  5. 2

    Ich würde vorschlagen, um jquery verwenden für diese Art von Anforderung . Geben Sie diesem einen Versuch

    <div id="commentList"></div>
<div id="addCommentContainer">
    <p>Add a Comment</p> <br/> <br/>
    <form id="addCommentForm" method="post" action="">
        <div>
            Your Name <br/>
            <input type="text" name="name" id="name" />


            <br/> <br/>
            Comment Body <br/>
            <textarea name="body" id="body" cols="20" rows="5"></textarea>

            <input type="submit" id="submit" value="Submit" />
        </div>
    </form>
</div>​

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    /* This flag will prevent multiple comment submits: */
    var working = false;
    $("#submit").click(function(){
    $.ajax({
         type: 'POST',
         url: "mysubmitpage.php",
         data: $('#addCommentForm').serialize(), 
         success: function(response) {
            alert("Submitted comment"); 
             $("#commentList").append("Name:" + $("#name").val() + "<br/>comment:" + $("#body").val());
         },
        error: function() {
             //$("#commentList").append($("#name").val() + "<br/>" + $("#body").val());
            alert("There was an error submitting comment");
        }
     });
});
});​
    • Tolle Funktion, aber var working = false hat nichts auf seine eigene. Ich bin angenommen, Sie würden es in eine bedingte um zu verhindern, dass mehrere unterwirft.
    InformationsquelleAutor Pit Digger
  6. 2

    Es ist viel einfacher zu benutzen Sie einfach jQuery, da dies nur eine Aufgabe für die Universität, und Sie brauchen nicht zu speichern code.

    So, Ihr code wird wie folgt Aussehen:

    function sendMyComment() {
    $('#addComment').append('<input type="hidden" name="video_id" id="video_id" value="' + $('#video_id').text() + '"/><input type="hidden" name="video_time" id="video_time" value="' + $('#time').text() +'"/>');
    $.ajax({
        type: 'POST',
        url: $('#addComment').attr('action'),
        data: $('form').serialize(), 
        success: function(response) { ... },
    });

}
    InformationsquelleAutor Varvara Stepanova
Schreibe einen Kommentar