php - PHPファイルから受け取ったデータに基づいて、ajaxフォーム送信に対してtrueまたはfalseを返す方法は?

Question

フォームは常に送信されます。data=="available" の場合にのみ送信したい、つまり...phpファイルが利用可能であると返されました。

function PostData() {
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            throw new Error("Ajax is not supported by this browser");
        }
        var username = document.getElementById("username_input").value;
        xhr.open('POST', 'header/onsubmit_check.php');
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("username=" + username);


        xhr.onreadystatechange = function () {
                var data=xhr.responseText.trim();
                document.getElementById('onsubmit_feedback').innerHTML = data;
        }

        if (data=='Available') {
        return true;
        } else {
        return false;
        } 
    }

Answer 1

HTML では、必ずフォームを次のように使用してください。

<form id="my_form" onsubmit="return PostData()">

JavaScript コードにいくつかの変更を加える

function PostData() {
        var xhr,data;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            throw new Error("Ajax is not supported by this browser");
        }
        var username = document.getElementById("username_input").value;
        xhr.open('POST', 'header/onsubmit_check.php');
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send("username=" + username);


        xhr.onreadystatechange = function () {
                data=xhr.responseText.trim();
                document.getElementById('onsubmit_feedback').innerHTML = data;
                if (data==='Available'){
                     document.getElementById("my_form").submit();
                }
        }

        return false;

    }

falseajaxが必要な値を返すと、関数は常にフォームを返し、送信します。