Vanilla JS+AJAX - 檢查一個值是否已經存在

Question

我有一個表單，其中包含一個輸入（帖子的標題）。 我需要用我的數據庫中不存在的值填充該輸入，所以我要做的是請求 AJAX 調用，以動態檢查該帖子標題是否已經創建，由“激活” onChange”事件。

這是我的香草 JS\AJAX 代碼：

            function checkEx(url, cFunction) {
                var xhttp;
                xhttp=new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        cFunction(this);
                    }
                };
                xhttp.open("GET", url, true);
                xhttp.send();

            }

            function checkExNow(xhttp) {
                document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
            }

這是我的 HTML 輸入：

<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>

問題是，我必須找到一種發送輸入值的方法，以便使用我的數據庫在 PHP 文件上檢查它。

請教我如何使用 vanilla JS 做到這一點。

先感謝您！

Answer 1

您還需要將輸入字段的當前值發送到您的 function

function checkEx(url, cFunction, valueToCheck) {
    var xhttp;
    xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            cFunction(this);
        }
    };
    xhttp.open("GET", url+"?check="+valueToCheck, true);
    xhttp.send();
}

<input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" type="text" placeholder="Post Title"> <div id="pcp_ex"></div>

在這里你可以檢查一個完整的例子。

Answer 2

感謝您的幫助，我成功了。 對於那些遇到類似問題的人，想知道如何做到這一點，這就是我的管理方式：

JS：

            function checkEx(url, cFunction, valueToCheck) {
                var xhttp;
                xhttp=new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        cFunction(this);
                    }
                };
                xhttp.open("GET", url+"?check="+valueToCheck, true);
                xhttp.send();
            }

            function checkExNow(xhttp) {

                document.getElementById("pcp_ex").innerHTML = xhttp.responseText;
            }

HTML：

 <input onchange="checkEx('inc/ajax/pcp_check_ex_value.php', checkExNow, this.value)" name="pcp_name" class="reg_input" type="text" placeholder="Post Title"> 
<span id="pcp_ex"></span>

PHP：

$exe = $_GET['check'];