Javascript、AJAX、作品の利用時alert()

StackOverflow https://stackoverflow.com/questions/1267454

  •  13-09-2019
  •  | 
  •  

質問

私が困っ可能です。このように行動する奇.こう。い形で、ユーザーの届け出るとともで通話機能(onsubmitのイベントを確認するために、提出されたデータが悪い場合や、ユーザー名/メールは既にデータベース（デザインのためこの部分だfalseを返すよび表示を使用してエラーをDOM.こちらのコードです。何もないにしているときだけを使用している空alert(")メッセージなので、それだけでは無効となります。のです。

//////////////////////////////////////

function httpRequest() {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your browser does not support XMLHTTP!");
    }

    return xmlhttp;
}

function validateRegForm(reg) {

    var isValidForm = true;
    var warningIcon = "";//for later in case we want to use an icon next to warning msg

    with(reg) {


        var regFormDiv = document.getElementById("registration_form");

        //Check if dynamic div exist, if so, remove it
        if(document.getElementById('disp_errors') != null) {
            var dispErrorsDiv = document.getElementById('disp_errors');
            document.getElementById('reg_form').removeChild(dispErrorsDiv);
        }           

        //Dynamically create new 'div'
        var errorDiv = document.createElement('div');
        errorDiv.setAttribute('id','disp_errors');
        errorDiv.setAttribute('style','background-color:pink;border:1px solid red;color:red;padding:10px;');
        document.getElementById('reg_form').insertBefore(errorDiv,regFormDiv);




        var xmlhttp = httpRequest();
        var available = new Array();
        xmlhttp.onreadystatechange = function() {
            if(xmlhttp.readyState == 4)
            {   
                var response = xmlhttp.responseText;
                if(response != "") {

                    //Return values
                    var newValue = response.split("|");
                    available[0] = newValue[0]; 
                    available[1] = newValue[1]; 
                }
            }
        }

        xmlhttp.open("GET","profile_fetch_reg_info.php?do=available&un="+u_username.value+"&email="+u_email.value+"",true);
        xmlhttp.send(null);


        alert(' '); ////////////WITHOUT THIS, IT DOESN'T WORK. Why?

        if(available[1] == "taken") {
            errorDiv.innerHTML += warningIcon+'Username is already taken!<br />';
            isValidForm = false;
        } else if(u_username.value.length < 4){
            errorDiv.innerHTML += warningIcon+'Username must be more than 4 characters long!<br />';
            isValidForm = false;
        } else if(u_username.value.length > 35) {
            errorDiv.innerHTML += warningIcon+'Username must be less than 34 characters long!<br />';
            isValidForm = false;
        }


        if(available[0] == "taken") {
            errorDiv.innerHTML += warningIcon+'Email address entered is already in use!<br />';
            isValidForm = false;
        } else if(u_email.value == ""){
            errorDiv.innerHTML += warningIcon+'Email address is required!<br />';
            isValidForm = false;
        } else {
            //Determine if email entered is valid
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (!filter.test(u_email.value)) {
                errorDiv.innerHTML += warningIcon+'Email entered is invalid!<br />';
                u_email.value = "";
                isValidForm = false;
            }
        }


        if(u_fname.value == ""){
            errorDiv.innerHTML = warningIcon+'Your first name is required!<br />';
            isValidForm = false;
        }

        if(u_lname.value == ""){
            errorDiv.innerHTML += warningIcon+'Your last name is required!<br />';
            isValidForm = false;
        }



        if(u_password.value.length < 4){
            errorDiv.innerHTML += warningIcon+'Password must be more than 4 characters long!<br />';
            isValidForm = false;
        } else if(u_password.value.length > 35) {
            errorDiv.innerHTML += warningIcon+'Password must be less than 34 characters long!<br />';
            isValidForm = false;
        } else if (u_password.value != u_password2.value) {
            errorDiv.innerHTML += warningIcon+'Password and re-typed password don\'t match!<br />';
            isValidForm = false;
        }


        if(u_squestion.value == ""){
            errorDiv.innerHTML += warningIcon+'A security question is required!<br />';
            isValidForm = false;
        }

        if(u_sanswer.value == ""){
            errorDiv.innerHTML += warningIcon+'A security answer is required!<br />';
            isValidForm = false;
        }

        if(u_address.value == ""){
            errorDiv.innerHTML += warningIcon+'Address is required!<br />';
            isValidForm = false;
        }

        if(u_city.value == ""){
            errorDiv.innerHTML += warningIcon+'City is required!<br />';
            isValidForm = false;
        }

        if(u_state.value == ""){
            errorDiv.innerHTML += warningIcon+'State is required!<br />';
            isValidForm = false;
        }

        if(u_zip.value == ""){
            errorDiv.innerHTML += warningIcon+'Zip code is required!<br />';
            isValidForm = false;
        }

        if(u_phone.value == ""){
            errorDiv.innerHTML += warningIcon+'Phone number is required!<br />';
            isValidForm = false;
        }

        if(isValidForm == false)
            window.scroll(0,0);

        return isValidForm;
    }

}
役に立ちましたか？

解決

それは、その機能（alert()から下まですべて）に残っているのJavaScriptの処理を遅らせているため、

alert()は、AJAXリクエストが完了するのに十分な時間を残して、役立ちます。 AJAXでの最初の文字は、（デフォルトで）応答が即座に「将来のある時点」で入って来なくなることを意味し、「非同期」を表します。

（あなたがのないの実装する必要があります）

一つの修正は（open()するfalseの第三引数を変更することで）処理の同期を行うことで、スクリプトの更なる処理（全体のWebページを停止します）リクエストが戻るまで。リクエストが完了するまで、それが効果的にWebブラウザを凍結するので、これは悪いです。

適切な修正は、AJAX要求の結果に依存するすべての処理がonreadystatechangeの関数に移行し、AJAX要求を開始、main関数にすることはできませんように、あなたのコードを再構築することです。

これは通常の処理方法は、（AJAXリクエストが送信される前に）フォームの読み取り専用を作り、すべてが大丈夫であれば、その後、AJAXの応答ハンドラで、「処理」のメッセージのいくつかの並べ替えを表示するために、あなたのDOMを変更することです（サーバが適切にとの検証が成功した）フォーム上のコールsubmit()を応答し、そうでない場合は再度、フォームwriableを作成し、検証エラーを表示します。

他のヒント

問題はXMLHTTPRequestを非同期であるということです - それは、バックグラウンドでリクエストを送信し、それが終了するのを待ちません。

。

alert文は、要求が終了した時に、ユーザーが[OK]をクリックするまで待機するコードが発生します。

あなたはこのように、onreadystatechangeイベントを使用する必要があります：

xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState==4) {
        // Do things
    }
};
応答が受信された後、

このプロパティに割り当てたメソッドが呼び出されます。

（とあなたがそのreadyStateをチェックする必要がある理由で、他の時間、で4です）

いリクエストを送信する 非同期的に, り、このとき:

xmlhttp.open(..., true);

通 true として、第三引数 open() このコードは、引き続き前の結果。

の alert() はる非同期要求を完了する前にその後のコードです。

い通常はお勧めてくれないのコードすることで、その結果、AJAX通のコールバック関数内には:

if(xmlhttp.readyState == 4)

ブロックがお場合で、呼び出しの結果かを返すから検証機能です。その場合、いかについて同期呼び出し、通過 false へ open().そしてその後のコードな走行までの応答が帰ってきました。

これらの人は正しいですが、私はまた、フォームが有効でない場合、フォームの提出がキャンセルされるので、検証メソッドからブール値を返すようにしてくださいだろう。

の線に沿って何かます：

<form onsubmit="return IsValid();">

...

</form>

また、常にのvalidateRegFormのからfalseを返すとの xmlhttp.onreadystatechange =機能を持つことができます（）は、それが有効であればフォームを送信、またはお使いのエラーメッセージを表示します。

なおAJAX通話は非同期。のコードを以下の xmlhttp.send() 実行されます。なお待ちごajax通話終了する場合を除くは、サービス"といいます。）

移動のすべてのコードが実行された後、ajaxの呼び出しのコールバックの方法についてアフターサービスについては、後に通話を終了しました。

[編集]: ほかの問題だと思いAJAXを利用したかを検証するために形成し、ユーザーへ提出し通常の方法でのように見えるビット数です。

を分けることは可能ですの検証2部?一ることができる、純粋にクライアント側ではその他のサーバ側のバリデーションを実施します。できるのを完全にサーバ側でご提出を返し誤差戻します。

別のオプションを避けるための伝統を提出します。かをやってajaxの通話とにかく、なんの保存-編集/うのajax通話そのものを取り除く必要書?意するものだしをサポートする必要があるのを提出した場合、ユーザがjavascriptを無効になります。

あなたはそれが正常に動作します、偽）（xmlhttp.openする三番目のパラメータを渡す必要があります。

私は例えば、タイプ=「提出」を使用していたとき、私は同じ問題を抱えていた。

<button type="submit" class="btn btn-default" name="btn-login" id="btn-login" onclick="submitForm()">
  <span class="glyphicon glyphicon-log-in"></span> &nbsp; Sign In

私はそれが=「ボタン」と入力して変更し、それが動作します。

また、同じ問題です。一度を削除しま alert("") うまくいきませんでした。きっかけになるかもしれないと出すことになるのです。

HTMLにおける利用する場合 <button></button> は、ボタンを押すと、ブラウザの行為を行うをクリックすると、次のようにし、その後の呼び出しイベントハンドラでバーのページはこのような場合 alert("") 直後にコード防止のためのページを再読み込み.

利用することさえ可能です <input type="button" value="something"> の代わりに <button></button> 防止のブラウザの再読み込みます。

私は同じ問題を抱えていたし、単に追加しました：

    <?php
    usleep(200000)// 2 seconds

？>

ところで、

ヘッドにjQueryの1.9.1を延期伴うジャバスクリプト（後
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top