2016-06-20 12 views
0

Nach dem Klicken auf Senden beforeSend: funktioniert, aber es ruft nicht success: auch gibt es keine Konsole Fehler. Die Daten werden auch korrekt an die Datenbank gesendet! Dann warum nicht die success: anrufen. Bitte HilfeJQuery Formular reichen nicht anrufen Erfolg

$(function() { 
    //hang on event of form with id=ticketForm 
    $("#ticketForm").submit(function(e) { 
     //prevent Default functionality 
     e.preventDefault(); 
     //get the action-url of the form 
     var actionurl = e.currentTarget.action; 
     var form = $('#ticketForm'); 
     var submit = $('#submite'); 

     $.ajax({ 
      url: actionurl, 
      type: "POST", 
      data: $("#ticketForm").serialize(), 
      dataType: "json", 
      contentType: 'application/json; charset=utf-8', 
      cache: false, 
      beforeSend: function(e) { 
       submit.html("Booking...."); 
      }, 
      success: function(e) { 
       submit.html("Booking Completed !"); 
       //get the message from booking.php and show it. 
       $(".alert").removeClass("hide"); 
       var msg = $.ajax({ 
        type: "GET", 
        url: actionurl, 
        async: false 
       }).responseText; 
       document.getElementById("success-message").innerHTML = msg; 
       setTimeout(function() { // wait for 3 secs(2) 
        location.reload(); // then reload the page.(3) 
       }, 3000); 
      }, 
      error: function(e) { 
       console.log(e) 
      } 
     }); 
    }); 
}); 

Konsolenmeldung

Object {readyState: 4, responseText: "<strong>Seat Booked Successfully</strong>", status: 200, statusText: "OK"} 
+2

Ihre Konsolennachricht stammt von 'error', die Antwort muss ein gültiger JSON sein. – skobaljic

+0

Warum verwenden Sie den zweiten Ajax-Anruf? Welches Ergebnis kommen Sie für die erste zurück? tut "Buchung abgeschlossen!" angezeigt werden? –

Antwort

1

In Ihren AJAX-Aufruf Einstellungen dataType zu json gesetzt, aber im Gegenzug bieten Sie einen String.

datatype (Standard: Intelligente Raten (xml, json, ein Skript oder html)) Der Art der Daten, die Sie vom Server erwartet. Falls keine ist angegeben, versucht jQuery es zu schließen, basierend auf dem MIME-Typ der Antwort

So haben Sie zwei Möglichkeiten:

  1. eine gültige JSON Geben Sie in Antwort
  2. Do Fragen Sie nicht nach JSON, indem Sie den Wert dataType (zu html) ändern oder entfernen.
+0

@skokaljic Sie sind direkt nach dem Entfernen der 'dataType' rufen Sie den Erfolg, aber die Form submit 2 mal oder ich fand 2 Zeile auf Datenbank :( – Firefog

+0

Ihr Code reicht es einmal, bitte reinigen Sie Ihre Daten und überprüfen Sie es erneut. – skobaljic

+0

wenn ich 'setTimeout()' Abschnitt aus dem 'Erfolg:' dann die einmal gespeicherten Daten in der Datenbank sonst speichern 2 mal. – Firefog

0

ich ähnliches Problem hatte. Wenn Sie die Seite erfolgreich umleiten, müssen Sie e.preventDefault(); // verhindern Seite

nach dem Ajax-Aufruf oder

return false aktualisieren; // Aktualisierung der Seite

So etwas wie dies zu verhindern:

$(function() { 
//hang on event of form with id=ticketForm 
$("#ticketForm").submit(function(e) { 
//prevent Default functionality 
e.preventDefault(); 
//get the action-url of the form 
var actionurl = e.currentTarget.action; 
var form = $('#ticketForm'); 
var submit = $('#submite');  


$.ajax({ 
     url: actionurl, 
     type: "POST", 
     data: $("#ticketForm").serialize(), 
     dataType: "json", 
     contentType: 'application/json; charset=utf-8', 
     cache: false, 
     beforeSend: function(e) { 
      submit.html("Booking...."); 
     }, 
     success: function(e) { 
      submit.html("Booking Completed !"); 
      //get the message from booking.php and show it. 
      $(".alert").removeClass("hide"); 
      var msg = $.ajax({type: "GET", url: actionurl, async: false}).responseText; 
      document.getElementById("success-message").innerHTML = msg; 
      setTimeout(function(){// wait for 3 secs(2) 
      location.reload(); // then reload the page.(3) 
      }, 3000); 
     }, 

     error: function(e) { 
      console.log(e) 
     } 
}); 
return false;  e.preventDefault(); //any one of this options to prevent page refresh after ajax call 
}); 
}); 
+0

OP ist bereits verhindert, 'form' zu unterbreiten –

+0

seine bereits verhindern Seite zu aktualisieren' e.preventDefault(); ' – Firefog

+0

und meine Frage ist, warum es nicht die' success: 'aber es rufen 'vorSenden:' – Firefog

1

In einem Ajax-Aufruf bedeutet "dataType" -Attribute, welches Datenformat vom Client (Browser) erwartet werden kann. Wie pro Fehlermeldung Server gibt 'string' anstelle von 'json' zurück.

Aber auf der anderen Seite erwartet Ajax Anruf json Daten vom Backend-Server zurückgegeben werden. Stellen Sie entweder eine gültige JSON als Antwort bereit oder ändern Sie den Datentyp in html.

Verwandte Themen