JavaScript JQuery Ajax Problème: POST fonctionne très bien dans Firefox, IE, Safari, mais pas Chrome

Question

Je suis nouveau JavaScript, et de travailler sur un projet passe-temps avec quelques développeurs. Nous avons une page simple qui est utilisé pour soumettre des demandes à une base de données.

J'ai décidé d'essayer d'apprendre JQuery, et a commencé à mettre en œuvre certaines fonctionnalités AJAX dans cette page de demande. Il fonctionne très bien dans FireFox, IE et Safari, mais pour une raison étrange, je ne peux pas obtenir de travailler dans Chrome.

J'ai débogage pour quelques heures maintenant, et je ne sais pas pourquoi cela ne fonctionne pas. Voici la partie pertinente du formulaire HTML (post action retirée en raison de 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>

Et voici la forme PHP qu'il message à:

<?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);
?>

Et surtout, voici mon code JavaScript débutant qui est tout simplement dans le fichier HTML:

<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>

Dans un premier temps, j'utilisais la fonction commentée .post $, qui fonctionne avec les navigateurs mentionnés ci-dessus. J'ai essayé de passer à la fonction .ajax $ au cours de mon processus de débogage, et découvert que FF, IE et Safari retourne toujours une alerte « succès », tandis que Chrome retourne une erreur avec le statut 0 et une réponse vide.

Être un débutant JavaScript, je suis complètement perdu à la raison pour laquelle ce serait un échec. Si quelqu'un pouvait me diriger dans la bonne direction, vous aurez mon profond respect et bons vœux. Merci.

Answer 1

Vous ne semblez pas empêcher l'action par défaut sur le bouton d'envoi. Ainsi, après vos feux de la fonction clic, la forme présente encore, l'annulation sans doute votre XMLHttpRequest.

(Ce qui pourrait faire une différence entre les navigateurs est ici à la fin de la fonction que vous retirez la forme de la page en appelant la fonction text(). Si cela devait arrêter le formulaire se soumis? Je ne sais pas ... un peu navigateurs peuvent, mais il n'y a pas de spécification qui le dit.)

Utilisez event.preventDefault(); sur l'argument passé dans le gestionnaire function(event) { ... } pour arrêter le bouton clic pour passer par soumettre le formulaire.

Mais ne se lient pas sous forme de code de soumission à un bouton d'entrée. Votre script peut (en fonction du navigateur et d'autres attributs de la forme) ne parviennent pas à tirer sur un autre type de soumission, comme une presse Entrez. validation et toujours lier AJAX-forme de remplacement en utilisant l'événement submit sur le form lui-même. event.preventDefault(); applique encore.

L'omission de l'attribut action d'un <form> est invalide; le navigateur choisit généralement l'URL de la page existante soumettre. Si vous souhaitez former des champs sans formulaire pour soumettre (et vous n'avez pas besoin entrées radio), omettez simplement l'élément <form>. Mais vraiment, vous devriez utiliser l'amélioration progressive:. D'abord faire le travail sous forme de HTML brut, avec un bon method="POST" action="ajaxfulfill.php" et puis construire une fonction AJAX trivial au-dessus de ce

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

injection de script. Au lieu de cela:

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

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

Vous devez utiliser encodeURIComponent(...) sur chacune des valeurs dans une forme codée soumission d'URL, ou des caractères spéciaux se briser. Mieux vaut laisser jQuery faire pour vous:

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

ou encore plus simple, laissez tomber toute la lecture manuelle de field.val() et il suffit d'utiliser l'existant serialize fonction qui fait tout pour vous:

data: $(this).serialize(),

(Si l'on suppose this est maintenant le form vous manipulez onsubmit pour ... si elle était le bouton d'envoi, vous auriez à dire $(this.form).)

Voulez-vous vraiment être prendre le nom d'utilisateur à partir des données POST soumises par les utilisateurs, qu'ils auraient pu changer? À moins que les noms d'utilisateur sont volontairement sans sécurité, il semble une meilleure idée de l'obtenir de la session d'où il est venu.

Answer 2

La première chose que vous devez faire est d'isoler le problème. v4.0.249.27 Chrome (sur OS X, au moins) est livré avec des outils de développement que vous auriez probablement utiles. Voyez ce que Chrome fait lorsque vous cliquez sur ce bouton. Vous pouvez également ajouter « .ajax » à la liste des « expressions surveillées » dans l'onglet « Scripts » des outils de développement.

Les outils de développement peuvent être trouvés par Afficher » Développeur » Outils de développement .

Answer 3

Vous pouvez faire quelques petites choses pour diagnostiquer vous-même:

1. Maj + Ctrl + J dans Chrome pour lancer la console Javascript et activer le débogage. Tenez-points d'arrêt et étape par votre fonction
2. Regarder la console erreur / avertissements Javascript (même dans vos autres navigateurs)

Answer 4

Je me rends compte que c'est un ancien poste, mais je viens d'avoir des symptômes similaires dans mon projet et a fini ici pour essayer de trouver une solution.

J'ai suivi certains des conseils ici sur le débogage et réalisé que Chrome ne met pas à jour la même chose que les autres navigateurs. Les changements que j'avais fait dans le code js et css ont été instantanément mis à jour dans Safari et Firefox avec un rafraîchissement normal, mais Chrome a besoin d'un rechargement dur et cache clair avant à jour ces mêmes éléments.

Je ne dis pas que c'est le remède à tous les problèmes mentionnés ci-dessus, mais il a résolu mon problème.