通过 Ajax 发送数据后 PHP 中的未定义变量

Question

我正在尝试通过 Ajax 将数据发送到我的 php 文件并进行处理，我不知道错误在哪里 Ajax 似乎没问题，但在接收后通过 php 文件中的 $_POST 获取数据，但是当我尝试回显我的变量时出现错误。

我正在使用 POST;

发送数据

这是我的前端代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <!-- <form id="ArticleEnterForm" method="POST" action="ProcessFormData.php"> -->
    <div id="warningsDiv">
        wowowo
    </div>
    <label id="ArticleTitleLabel">Article title: </label>
    <input id="ArticleTitleInputField" type="text" name="">
    <div>
    </div>
    <iframe id="ArticleiFrame"></iframe>
    <label>Enter article: </label>
    <textarea id="ArticleContentTextArea"></textarea>
    <label id="ArticleFileNameLabel">Enter file name(save as):</label>
    <input id="ArticleFileNameInputField" type="text">
    <button id="SubmitButton"  name="submitButton">Submit</button>
    <!-- </form> -->
    <script>
        function SubmitForm() {
            function CheckFields() {

                var warningsDiv = document.getElementById('warningsDiv');

                var ArticleTitle = document.getElementById('ArticleTitleInputField');
                var ArticleContent = document.getElementById('ArticleContentTextArea');
                var ArticleFileName = document.getElementById('ArticleFileNameInputField');

                if (ArticleTitle.value == "") { warningsDiv.innerHTML += "<strong> Enter article Name </strong>"; } else { return true; }
                if (ArticleContent.value == "") { warningsDiv.innerHTML += "<strong> Enter article content </strong>"; } else { return true; }
                if (ArticleFileName.value == "") { warningsDiv.innerHTML += "<strong> Enter article file name (save as) </strong>"; } else { return true; }

            }

            if (CheckFields == true) {

                var articleTitle = ArticleTitle.value;
                var articleContent = ArticleContent.value;
                var articleFileName = ArticleFileName.value;
            }


            //submitting using POST method
            var sendDataRequest = new XMLHttpRequest();
            sendDataRequest.open("POST", "ProcessFormData.php", true);
            sendDataRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            sendDataRequest.onreadystatechange = function () {
                if (sendDataRequest.readyState === 2) {
                    warningsDiv.innerHTML = "<strong>Loading...</strong>";
                }
                if (sendDataRequest.readyState === 4 && sendDataRequest.status === 200) {
                    console.log("dtatus: " + sendDataRequest.readyState);
                    warningsDiv.innerHTML = sendDataRequest.responseText;

                }
            }
            var dataToSend = "ArticleTitleData=" + articleTitle + "&ArticleContentData=" + articleContent + "&ArticleFileNameData=" + articleFileName;
            sendDataRequest.send(dataToSend);
        }
        var submitButton = document.getElementById('SubmitButton');
        submitButton.addEventListener("click", SubmitForm);
    </script>
</body>

</html>

这是我的 PHP 代码：

<?php

ini_set('display_errors', 'On');    //to get errors displayed

$ArticleTitle = "";
$ArticleContent = "";
$ArticleFileName = "";

if(isset($_POST['ArticleTitleData'])){
    $ArticleTitle = $_POST['ArticleTitleData'];
}else {
    echo("no var artn ");
}

echo("data was entered successfully  following data was entered:  Title: " . $ArticleTitle );
?>

这个脚本哪里出错了。

我在浏览器屏幕上看到的响应文本是：

数据已成功输入以下数据：标题：未定义

Answer 1

问题是您正在使用的某些变量在您尝试使用它们的范围内未定义：

        function CheckFields() {
            // The variables defined with `var` exist in the scope of this function
            var warningsDiv = document.getElementById('warningsDiv');

            var ArticleTitle = document.getElementById('ArticleTitleInputField');
            var ArticleContent = document.getElementById('ArticleContentTextArea');
            var ArticleFileName = document.getElementById('ArticleFileNameInputField');

            if (ArticleTitle.value == "") { warningsDiv.innerHTML += "<strong> Enter article Name </strong>"; } else { return true; }
            if (ArticleContent.value == "") { warningsDiv.innerHTML += "<strong> Enter article content </strong>"; } else { return true; }
            if (ArticleFileName.value == "") { warningsDiv.innerHTML += "<strong> Enter article file name (save as) </strong>"; } else { return true; }

        }

        if (CheckFields == true) {
            // No `ArticleTitle`, etc. here...
            var articleTitle = ArticleTitle.value;
            var articleContent = ArticleContent.value;
            var articleFileName = ArticleFileName.value;
        }

请注意，您是在 CheckFields() 函数中使用 var 定义变量。所以这些变量的范围是那个函数和其中的任何东西，它们在 CheckFields() 函数之外不可用。

要解决这个问题，您可以 return 它们来自或在函数之前定义它们。

例如：

        var ArticleTitle = document.getElementById('ArticleTitleInputField');
        var ArticleContent = document.getElementById('ArticleContentTextArea');
        var ArticleFileName = document.getElementById('ArticleFileNameInputField');

        function CheckFields() {

            var warningsDiv = document.getElementById('warningsDiv');

            if (ArticleTitle.value == "") { warningsDiv.innerHTML += "<strong> Enter article Name </strong>"; } else { return true; }
            if (ArticleContent.value == "") { warningsDiv.innerHTML += "<strong> Enter article content </strong>"; } else { return true; }
            if (ArticleFileName.value == "") { warningsDiv.innerHTML += "<strong> Enter article file name (save as) </strong>"; } else { return true; }

        }

        // etc.

请注意，如果您还需要函数外部的 warningsDiv，则需要同样对待它。

Answer 2

是的，我知道问题出在哪里了简短回答：当我没有正确调用 CheckFields(); 时长答案：而不是 if(CheckFields() == true){ //something } 我在做 if(CheckFields == true){ //something } 我之所以知道这一点，是因为当我提交空的输入字段时，warningsDiv 没有变化，因为它应该是在调用 CheckFields(); 函数时。

感谢大家对我的帮助...

通过 Ajax 发送数据后 PHP 中的未定义变量

Undefined variables in PHP after sending data via Ajax

php

forms

ajax

backend