Get JSON-Antwort vom Formular Absenden

Ich bin nicht auf front-end-developer und ich verbringen viel Zeit versuchen zu tun. Hoffe, Euch kann mir helfen.
Ich habe ein Formular, das senden von Dateien an eine API-server, wie unten:

<form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1">   

      <div class="inputFileCustom">
        <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
        <label for="uploadFiles">
            <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
            Choose a file
            </div>
        </label>
    </div>

    <input type="submit" value="Upload PDF" class="btn btn-primary" />
</form>

url/upload gibt einen JSON, wie:

{ "status": "ok"/"fail" }

Brauche ich zwei Dinge:

  1. Verhindern abschicken umleiten auf url/upload;
  2. Bekommen JSON-Antwort vom server und wenn dies erfolgreich ist, rufen Sie loadFiles() - Funktion (die ist bereits in Arbeit).

Bin ich mit javascript für loadFiles() Funktion, aber es ist sehr einfach.

  • bitte teilen Sie loadFiles () - Funktion
  • Benutzt du jQuery? Sie können installieren Sie einen Ereignis-listener auf "senden" für Ihre form und Ereignisse verwenden.preventDefault() nicht aufrufen 'url/upload' nach dem senden. Kombinieren Sie es mit einigen AJAJ und du bist fertig.
  • Ich bin mit jQuery und ich versuchte es. Aber jeder ajax-code gearbeitet. Bekam ein Bad Request Fehler.
InformationsquelleAutor Leonardo | 2016-03-02
  1. 3

    Können Sie die jquery-Formular-handler, 

    <script>     

    //Attach a submit handler to the form 
  //Attach a submit handler to the form 


$("#uploadForm").submit(function(event) {

    var formData = new FormData();
    formData.append("uploadFiles", $('[name="file"]')[0].files[0]);
    event.stopPropagation();
    event.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      data: formData,
      processData: false,
      contentType: false,
      type: 'POST',
      success: function(data) {
        alert(data);
        loadFiles()
      }
    });
    return false;
  });

    </script>

    Finden Sie diese stackoverflow-Frage

    • Danke aber es hat nicht funktioniert. Beim Debuggen, wenn es Schritte über var formData... Linie, ruft url/upload.
    • Versuchen Sie, die Aktion, und fügen Sie hart kodierte URL im Ajax-call.
    • Ich Tat, wie Sie gesagt haben, aber es funktioniert immer noch nicht, leitet es.
    • Getestet habe ich obigen code. Es nirgendwo umleitet.
    • Es gibt Uncaught TypeError: Illegal invocation. Ich habe versucht, ändern formData mit dem Namen aber immer noch nicht funktioniert.
    • Danke, dass Sie SO viel Shankar! Ihre code-update hat mir geholfen, die Lösung meines Problems! Ich hatte gerade zu ändern formData.append("uploadFiles"... auf einen Namen, auf welchem server war das warten.

    InformationsquelleAutor Shankar Gurav
  2. 2

    Sieht es aus wie Sie benötigen, um post-request mit Javascript. Wenn Sie JQuery verwenden, können Sie $.ajax zum Beispiel:

    $.ajax({
    url: '',
    type: '',
    data: {},
    success: function(data){
        console.log(data);
    }
})

    Verwendung dieser bedeutet, dass es nicht leiten Sie die Seite, Weg von der form, so dass Sie anzeigen können Erfolgs-oder Fehlermeldungen auf dem gleichen Bildschirm.

    Sehen http://api.jquery.com/jquery.ajax/ weitere Informationen

    • Ich versuchte es, aber vor AJAX zurückgegeben Bad Request.
    • Das ist ein serverseitiger Fehler, also entweder Ihr erwartet einen parameter Sie übergeben nicht, oder es ist etwas anderes server-Seite. Ajax ist die richtige Lösung, mit dem oben stehenden code wird eine Anfrage an den server und loggen Sie sich aus der Antwort.
    InformationsquelleAutor Luke P
  3. 0
    1. Prevent submit to redirect to url/upload    

    <form id="uploadForm" action="url/upload/" method="post" enctype="multipart/form-data" accept-charset="ISO-8859-1" onsubmit ='return checkRegistration()'>   

              <div class="inputFileCustom">
                <input type="file" size="45" name="file" id="uploadFiles" accept="application/pdf"/>
                <label for="uploadFiles">
                    <div class="ic-bt ic-bt-details ic-bt-text btn btn-border">
                    Choose a file
                    </div>
                </label>
            </div>

            <input type="submit" value="Upload PDF" class="btn btn-primary" />
        </form>


     <script>
        function checkRegistration(){
            if(!form_valid){           
                return false;
            }
            return true;
        }
        </script>
    • Dieser code-only-Antwort nicht erklären, was falsch war, oder wie es zu lösen ist.
    InformationsquelleAutor Santosh Ram Kunjir
  4. 0

    Überprüfen Sie diese Geige: https://jsfiddle.net/41mnz0z1/

    $('#uploadForm').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: '/echo/json/',
        data: $(this).serialize(),
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
});

    e.preventDefault() verhindert, dass die standard-Aktion der browser nach dem Absenden des Formulars (Umleitung auf eine andere Seite weitergeleitet). data: $(this).serialize() sendet das Formular die Daten zu Ihrer gewünschten url: 'fileUpload.php'.

    Es funktioniert das gleiche mit einer Datei.

    • Das wird nicht funktionieren. Ich weiß nicht, wie server kommt immer diese Anfrage aber mit $(this).serialize() einen Fehler zurück. Wenn ich mit dem Namen in der Eigenschaft URL (url + fileToPost) es gibt Schlechte Anfrage.
    InformationsquelleAutor Michael Röhrig
Schreibe einen Kommentar