JavaScript JQuery Ajax Problema: POST funziona bene in Firefox, IE, Safari, ma non Chrome

Question

Sono nuovo di JavaScript, e lavorare su un progetto hobby con alcuni sviluppatori. Abbiamo una semplice pagina che viene utilizzato per inviare richieste a un database.

ho deciso di provare l'apprendimento JQuery, e iniziato ad attuare alcune funzionalità AJAX in questa pagina richiesta. Funziona bene in Firefox, IE e Safari, ma per qualche strana ragione, non posso farlo funzionare in Chrome.

Sono stato debug di esso per un paio di ore ormai, e non ho idea del perché non funziona. Ecco la parte pertinente del modulo HTML (azione posta rimosso a causa di 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>

Ed ecco il modulo PHP che posta al:

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

E, soprattutto, ecco la mia newbie codice JavaScript che è semplicemente nel file 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>

In un primo momento, stavo usando la funzione di $ commentata .post, che funziona con i browser di cui sopra. Ho tentato di passare alla funzione di $ .ajax durante il mio processo di debug, e ho scoperto che FF, IE e Safari restituisce sempre un avviso di "successo", mentre Chrome sta tornando un errore con lo status di 0 e una risposta vuota.

Essendo un novizio JavaScript, io sono completamente perso al perché questo fallirebbe. Se qualcuno mi potrebbe punto nella giusta direzione, avrai il mio profondo rispetto e ben desideri. Grazie.

Answer 1

Non sembra essere impedendo l'azione predefinita sul pulsante di invio. Così, dopo i vostri fuochi funzione di clic, il modulo invia ancora, presumibilmente cancellando la tua XMLHttpRequest.

(Che cosa potrebbe fare la differenza cross-browser è che alla fine della funzione di rimuovere il modulo dalla pagina chiamando la funzione text(). Se questo dovesse fermare la forma sempre presentato? Non so ... un po ' browser potrebbe, ma non v'è alcuna specifica che dice così.)

Usa event.preventDefault(); sul l'argomento passato alla function(event) { ... } gestore di fermare il pulsante di scatto passando per inviare il modulo.

Ma non impegnano sotto forma di codice sottomissione a un pulsante di input. Lo script può (a seconda del browser e altri attributi del modulo) non riescono a sparare su un altro tipo di sottomissione come un premere Invio. Sempre convalida legare e AJAX-form-sostitutiva utilizzando l'evento submit sul form stesso. event.preventDefault(); applica ancora.

Tralasciando l'attributo action di un <form> non è valido; il browser sceglie di solito l'URL della pagina esistente per presentare al. Se si vuole formare i campi senza un modulo per inviare (e non hai bisogno di ingressi radiofonici), basta omettere l'elemento <form>. Ma in realtà si dovrebbe usare progressive enhancement:. Rendere il lavoro sotto forma di semplice HTML prima, con una corretta method="POST" action="ajaxfulfill.php", e poi di costruire una funzione AJAX banale in cima a quella

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

iniezione di script. Invece:

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

E

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

Si avrebbe bisogno di utilizzare encodeURIComponent(...) su ciascuno dei valori in una codifica URL-form-presentazione, o caratteri speciali si romperlo. Meglio lasciare jQuery farlo per voi:

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

o ancora più semplice, rilasciare tutti la lettura manuale dei field.val() e basta usare l'esistente serialize funzione che fa tutto per voi:

data: $(this).serialize(),

(Supponendo this è ora il form si sta gestendo onsubmit per ... se fosse il pulsante di invio, avresti da dire $(this.form).)

Vuoi veramente essere prendendo il nome utente dai dati POST inviati dagli utenti, che potrebbero sono cambiate? A meno che i nomi utente sono volutamente privi di sicurezza, sembrerebbe un'idea migliore per ottenerlo dalla sessione dove è venuto.

Answer 2

La prima cosa che devi fare è isolare il problema. Chrome v4.0.249.27 (su OS X, almeno) è dotato di strumenti di sviluppo che si sarebbe probabilmente trovare utili. Vedere ciò che Chrome sta facendo quando si fa clic quel pulsante. Si potrebbe anche voler aggiungere ".ajax" alla lista delle 'espressioni guardato' nella scheda 'Script' dei Developer Tools.

Gli strumenti di sviluppo possono essere trovati attraverso Visualizza » Developer » Strumenti di sviluppo .

Answer 3

Si possono fare alcune cose per diagnosticare da soli:

1. Shift + Ctrl + J in Chrome per avviare la console JavaScript e consentono il debug. Stick punti di interruzione e passo attraverso la funzione
2. Vedere la console degli errori / avvertenze Javascript (anche nei vostri altri browser)

Answer 4

Mi rendo conto che questo è un vecchio post, ma ho appena avuto sintomi simili nel mio progetto e sono finito qui cercando di trovare una soluzione.

Ho seguito alcuni di questi consigli sul debug e si rese conto che Chrome non aggiorna la stessa di altri browser. Le modifiche che avevo fatto nel codice js, css e sono stati immediatamente aggiornata in Safari e Firefox con un aggiornamento normale, ma ha bisogno di un Chrome Ricarica rigido e Cache chiaro prima l'aggiornamento continuo quegli stessi oggetti.

Non sto dicendo che questa è la cura per tutti i problemi di cui sopra, ma è risolto il mio problema.