JavaScript JQuery Ajax Issue: POST Adaequat in Firefox, IE, Safari, aber nicht Chrome

Question

Ich bin neu in JavaScript, und arbeite an einem Hobby-Projekt mit einigen Entwicklern. Wir haben eine einfache Seite, die Anfragen verwendet wird, um eine Datenbank zu übermitteln.

habe ich beschlossen, JQuery, um zu versuchen zu lernen, und begann eine AJAX-Funktionalität in diese Anfrage Seite zu implementieren. Es funktioniert gut in FireFox, IE und Safari, aber aus irgendeinem Grund kann ich nicht bekommen es in Chrome zu arbeiten.

Ich habe für ein paar Stunden Debuggen es jetzt, und ich habe keine Ahnung, warum es nicht funktioniert. Hier ist der relevante Teil des HTML-Formulars (post Aktion entfernt aufgrund JavaScript):

        <form method="POST">
            <input type="text" name="amount" value="0" size="7" />
            <input type="submit" value="Fulfill!" /><br />
            <input type="hidden" name="index" value="69" />
            <input type="hidden" name="item" value="Iron Ore" />
        </form>

Und hier ist die PHP-Form, dass es jeden Beitrag zu:

<?php
require_once("../classes/Database.php");
$database = new Database();

$amount = $database->sanitizeString($_POST['amount']);
$index = $database->sanitizeString($_POST['index']);
$username = $database->sanitizeString($_POST['username']);
$item =  $database->sanitizeString($_POST['item']);
$database->connect();
$database->setRequest($amount, $index, $username, $item);
$database->setKarma($username, $amount, $item);
?>

Und was am wichtigsten ist, ist hier mein Neuling JavaScript-Code, der einfach in der HTML-Datei ist:

<script language="JavaScript">
    var amount = 0;
    var index = 0;
    var item = 0;
    var username = "";
    var data = "";
    $(document).ready(function(){
        $("form input[type=submit]").click(function(){
            amount = $(this).siblings("input[name=amount]").val();
            index = $(this).siblings("input[name=index]").val();
            item = $(this).siblings("input[name=item]").val();
            username = "<?=$_SESSION['username']; ?>";
            //var stuff = $.post("pages/ajaxfulfill.php", {amount:amount,index:index,item:item, username:username}, function(data){alert(data)}, "html");
            var stuff = $.ajax(
                                    {
                                        url: "pages/ajaxfulfill.php",
                                        type: "POST", data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,
                                        success: function(data)
                                        {
                                            alert("Success")
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown)
                                        {
                                            alert("error" + XMLHttpRequest.status);
                                            alert("error" + XMLHttpRequest.responseText);
                                        }
                                    }
                               )
            $(this).parents("td").text("Submitted");

        });

    });

</script>

Zuerst war ich mit der kommentierten heraus $ .post-Funktion, die mit den oben genannten Browsern funktioniert. Ich versuchte, auf den $ Schnipsel Funktion während meines Debug-Prozesses zu wechseln, und fand heraus, dass FF, IE und Safari immer einen „Erfolg“ alert zurückkehren, während Chrome einen Fehler mit dem Status 0 und einer leeren Antwort zurück.

Als Neuling JavaScript, bin ich völlig verloren, warum dies nicht gelingen würde. Wenn jemand mich in die richtige Richtung zeigen könnte, werden Sie meinen tiefen Respekt und guten Wünsche haben. Danke.

Answer 1

Sie scheinen nicht die Standard-Aktion auf der Submit-Button zu verhindern. So nach dem Klick-Funktion ausgelöst, noch das Formular abschickt, Cancelling vermutlich Ihre XMLHttpRequest.

(Was könnte einen Unterschied Cross-Browser machen ist, dass Sie am Ende der Funktion durch den Aufruf der Funktion text() das Formular von der Seite entfernen. Sollte das die Form stoppen vorgelegt zu werden? Sie wissen nicht, ... einige Browser könnte, aber es gibt keine Spezifikation, so sagt.)

Mit event.preventDefault(); auf das Argument in den Handler function(event) { ... } ging durch das Formular abzuschicken gehen auf den Button klicken, um zu stoppen.

Aber keine Formularübermittlung Code an einen Eingang Taste binden. Ihr Skript kann (je nach Browser und andere Attribute des Formulars) nicht auf eine andere Art von Vorlage wie ein Enter drücken abzufeuern. Immer bindet Validierung und AJAX-Form-Wechsel mit dem submit Ereignisse auf dem form selbst. event.preventDefault(); noch gilt.

Das Weglassen des action Attribut eines <form> ist ungültig; der Browser wählt normalerweise die URL der bestehenden Seite zu unterbreiten. Wenn Sie Felder wollen bilden, ohne ein Formular einzureichen (und Sie brauchen keine Funkeingänge), lassen Sie einfach das <form> Element. Aber eigentlich soll man progressive Erweiterung werden:. Die Form der Arbeit von einfachem HTML macht ersten, mit einem richtigen method="POST" action="ajaxfulfill.php" und und baut eine triviale AJAX-Funktion oben auf, dass

username = "<?=$_SESSION['username']; ?>";

Script-Injektion. Statt dessen:

username= <?= json_encode($_SESSION['username'], JSON_HEX_TAG); ?>

Und:

data:"amount=" + amount + "&index=" + index + "&item=" + item + "&username=" + username,

Sie müßten encodeURIComponent(...) über jeden des Wertes in einer URL-codierten-Form-Vorlage verwenden, oder Sonderzeichen werden es brechen. Besser zu lassen jQuery tun, dass für Sie:

data: {amount: amount, index: index, item: item, username: username},

oder noch einfacher, fallen alle die manuelle Lesung von field.val() und verwenden nur die bestehende serialize Funktion, die alles für Sie tut:

data: $(this).serialize(),

(Unter der Annahme, this ist jetzt die form Sie Umgang mit onsubmit für ... wenn es den Absenden-Button waren, würden Sie haben $(this.form) zu sagen.)

Haben Sie wirklich den Benutzernamen vom Benutzer übermittelten POST-Daten nehmen wollen, die sie sich geändert haben könnte? Es sei denn, Benutzername bewusst Sicherheitsfrei sind, wäre es eine bessere Idee scheint es aus der Sitzung zu bekommen, woher es kam.

Answer 2

Das erste, was Sie tun müssen, ist das Problem zu isolieren. Chrome v4.0.249.27 (auf OS X, zumindest) kommt mit Entwickler-Tools, die Sie wahrscheinlich nützlich finden würde. Sehen Sie, was Chrome tut, wenn Sie auf diese Schaltfläche klicken. Vielleicht wollen Sie auch in die Liste der ‚überwachten Ausdrücke‘ in der ‚Scripts‘ Register der Developer Tools „Schnipsel“ hinzuzufügen.

Die Developer Tools können durch gefunden werden » Entwickler » Developer Tools .

Answer 3

Sie können ein paar Dinge tun, dies zu diagnostizieren selbst:

1. Shift + Strg + J in Chrome die Javascript-Konsole zu starten und das Debuggen ermöglichen. Halten Sie Haltepunkte und Schritt für Schritt durch Ihre Funktion
2. Sehen Sie die Javascript-Fehler / Warnungen Konsole (auch in den anderen Browsern)

Answer 4

Ich weiß, das eine alte Post, aber ich hatte gerade ähnliche Symptome in meinem Projekt und endete hier versucht, eine Lösung zu finden.

Ich folgte einige der Ratschläge hier über das Debuggen und erkennen, dass Chrome die gleichen wie anderer Browser nicht aktualisiert. Änderungen, die ich in dem JS-Code gemacht hatte, und CSS wurde in Safari und Firefox mit einer normalen Refresh sofort aktualisiert, aber Chrome braucht eine harte Reload und Cache löschen, bevor sie die gleichen Elemente aktualisiert.

Ich sage nicht, das ist das Heilmittel für die alle oben genannten Themen, aber es mein Problem gelöst.