0

この機能が機能しない理由がわかりjQueryません。とてもシンプルで、結果は明らかです。htmlとファイルに対していくつかのテストを行ってphp、それらが正しく機能していることを確認しました。問題は間違いなくこの機能にあります。

関数

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

ここで、アラートをさまざまな場所に配置して、この機能をテストしました。このコードを入れると

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();

    alert (email + password); // inserted this line

    $.post('sign_in.php', { email: email, password: password }, function(data) {         
          $('#errors').text(data);          
    });
});

次に、電子メールとパスワードのテキスト入力からの値を含む警告ボックスが表示されます。ただし、このように $.post 関数内でアラートを下に移動すると

$('#sui').submit(function () {
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

コメントに記載されているように、アラートは表示されず、フォームを送信した後にページが更新され、何も起こらなかったように元のページに残り、「エラー」div はメッセージを受け取りません。私の最初の考えは、htmlファイルに「email」、「password」または「sui」の ID を持つ別のフィールドがあるかもしれないということでしたが、そうではありません。これらはすべて一意の ID です。次に、phpファイルが実際にデータを返していることを確認しました。関連する html および php コードを見たい場合は、それを表示します。とにかく、どんな助けでも大歓迎です、見てくれてありがとう

4

1 に答える 1

2

イベントハンドラーをフォーム送信ボタンにバインドしているようです。$.post問題は、応答を処理する前にフォームが送信されているようです。

あなたがしたいことは、フォームが送信されないようにすることです。

これを試して：

$('#sui').submit(function (e) {      // added 'e' to catch the jQuery event
    e.preventDefault();             /* prevent the default action from happening, 
                                       in this case submitting the form */
    var email = $('#email').val();
    var password = $('#password').val();    

    $.post('sign_in.php', { email: email, password: password }, function(data) {
         alert ('hi'); // never shows up
         alert (data); // never shows up        
         $('#errors').text(data);       
    });
});

余談ですが、jQuery jqXHR Promiseインターフェイスをお勧めします。

$.post('sign_in.php', { email: email, password: password })
    .done(function(data) {
        // success
    })
    .fail(function(jqXHR, status, error) {
        // error
     });

また、最新のブラウザーではオブジェクトを検査できるため、個人的console.log()にはデバッグ用の開発者ツール (Chrome および IE では F12 キー) と共に使用することを好みます。alert()

たとえば、.fail()メソッドでjqXHR オブジェクトがどのように見えるかを確認したい場合は、 をalert(jqXHR)表示しますがObject [Object]、console.log(jqXHR)jqXHR オブジェクト全体を表示します。

于 2013-07-24T18:01:01.077 に答える