php - Ajax クエリがサーバーにリクエストを送信しない

Question

jQueryを使用しているWebページにAjaxを追加する作業を行っています。私はAjaxが初めてであることに注意してください。このページは単純な登録フォームであり、フォームが登録コードにリダイレクトされる前に、ユーザーが指定した電子メールアドレスが既に登録されているかどうかを確認し、登録されているかどうかをユーザーに伝えたいと考えています。

この質問とその回答を読んで、効果を再現するために実験しましたが、成功しませんでした。

[送信] をクリックすると、javascript 関数が呼び出されます (関数に診断コードを追加することでこれを証明しましたcheckEmail())。への呼び出し/user/process/chechemail.php。コード (以下) は/user/ディレクトリにurl:あります。相対パスと絶対パスのすべてのバリエーションでパスを変更しました。Apache エラーログには何も記録されません。

ユーザーが送信ボタンをクリックすると、「問題が発生しました!」というメッセージが表示されます。誰が何が間違っているかを見つけることができますか?

私が持っているコードは次のとおりです。

<script>
    function checkEmail()
    {
        $.ajax(
        {
            type: "POST",
            dataType: "html",
            data:
            {
                email: $('#email').val()
            },
            url: "/user/process/checkemail.php"
        })
        .done(function(response)
        {
            $('#message').html(response);
        })
        .fail(function()
        {
            $('#message').html("Something went wrong!");
            return false;
        });
    }
</script>

<div id="register-form">
    <form name="register" action="process/register.php" method="post" onsubmit="return checkEmail();">
        <div class="register-email-cell">
            <p class="text">Email Address</p>
        </div>
        <div class="register-email-cell">
            <input class="input" type="text" name="email">
        </div>
        <div class="register-email-cell">
            <input class="button" type="submit" value="Register">
        </div>
        <div>
            <p id="message" class="text"></p>
        </div>
    </form>
</div>

ノート：

<script>jQuery への参照は PHP インクルードにありますが、上には示されていません。
/user/process/checkemail.php - $_REQUEST['email'] を検索し、データベースに対してクエリを実行し、'Email address exists' または 'Email address available' のいずれかを示す文字列を返します - これにより、 bot を使用してメールアドレスを収集しますが、これは私自身の学習に使用したサンプルコードです。- 量産コードにはなりません。

score 2 · Accepted Answer

まず第一に、それをトリガーするイベントに .$ajax をバインドする必要があります...それは非同期的に(バックグラウンドで)実行され、すぐではなくイベントによってトリガーされるために使用されます-それはあなたのエラーを生成しています. また、コントローラーの呼び出しを相対パスに変更します（ビューファイルがユーザーにある場合は、「process/checkemail.php」に移動します）。あなたがフォームのアクションでしたように。

次に、js を別のファイルに保存することをお勧めします。

また、データベースと比較する前に、正規表現を追加して、それが電子メールかどうかを確認することもできます...

あなたは AJAX に慣れていないので、この記事を読んで、ここで使用しているものに慣れることをお勧めします。必要なもののために作成された例があります。

http://metaphorical-lab.com/blog/?p=352

ajax、post、および get 関数のリファレンスをチェックする oj jQuery Web サイト...

score 1 · Accepted Answer

checkEmail()関数はすぐに戻りますがundefined、フォームの送信は妨げられません。AJAX リクエストが開始される前に、ページがリロードされます。AJAX リクエストは非同期です。バックグラウンドで実行され、そのコールバックはへの実際の呼び出しを取り巻く制御フローの外で実行され$.ajax()、コールバックの戻り値は破棄されます。

あなたがやろうとしていることを達成する1つの方法はdone、チェックが成功した場合はコールバックにフラグを設定させ、フォームを再度送信し、フラグが設定されていない場合はcheckEmail()関数を返すようにすることfalseです:

var emailChecked = false;
function checkEmail()
{
    if (emailChecked) {
        return true;
    }
    $.ajax(
    {
        type: "POST",
        dataType: "html",
        data:
        {
            email: $('#email').val()
        },
        url: "/user/process/checkemail.php"
    })
    .done(function(response)
    {
        $('#message').html(response);
        emailChecked = true;
        $('form[name=register]').submit();
    })
    .fail(function()
    {
        $('#message').html("Something went wrong!");
    });
    return false;
}

score 0 · Accepted Answer

これを試して、問題が発生した場合は返信してください
。それを確認し、最後に応答をエコーします。
応答は成功セクションに表示されます

function checkEmail() {
var email = $('#email').val();
$.ajax({           
            type: "POST",  
            url:"/user/process/checkemail.php",  
            data:"email="+email,

            beforeSend: function()
            {                   
                //show some gif img
            },
            success: function(response)
            {               
                   $('#message').html(response);
            }, 

            complete: function()
            {
                //hide gif img
            },

            error: function(e)
            {  
                 alert('Error: ' + e);  
            }  

    }); //end Ajax
}//end function

<div id="register-form">
    <form name="register" action="" method="post" >
        <div class="register-email-cell">
            <p class="text">Email Address</p>
        </div>
    <div class="register-email-cell">
        <input class="input" type="text" name="email" id="email">
    </div>
    <div class="register-email-cell">
        <input class="button" type="submit" value="Register" onsubmit="return checkEmail();">
    </div>
    <div>
        <p id="message" class="text"></p>
    </div>
</form>

score -1 · Accepted Answer

    you have to use ajax like that


      function checkEmail()
            {
 $.ajax({
         url: "/user/process/checkemail.php",
        data: { 'email': $('#email').val() },
        type: "POST",
        dataType: "html",

        success: function (result) {
           $('#message').html(response);
        },
        failed: function (d) {
            $('#message').html("Something went wrong!");
                    return false;
        }
    });

score -1 · Accepted Answer

これがうまくいかない理由を説明していないため、これは最善の答えにはなりません。代わりに jQuery の .load() を使用する方が簡単だと思います。

あなたのコードは次のようになります。

 function checkEmail()
{
    email = $('#email').val();
    $('#message').load('/user/process/checkemail.php', {'email' : email});
}

これにより、php スクリプトの応答が ID div の要素に直接読み込まれます。{'email' : email} 部分は、email の値を持つ $_POST['email'] 変数をスクリプトに渡します。

score -1 · Accepted Answer

後

$.ajax(
{
    type: "POST",
    dataType: "html",
    data:
    {
        email: $('#email').val()
    },
    url: "/user/process/checkemail.php"

     success: function(data) {
         $('.result').html(data);
         alert('Load was performed.');
     }  
})

php - Ajax クエリがサーバーにリクエストを送信しない

6 に答える 6

Related

Reference