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;
        }

请注意，您正在使用var函数中的CheckFields()定义变量。因此，这些变量的范围是该函数及其中的任何内容，它们将无法在CheckFields()函数之外使用。

要解决此问题，您可以从函数中返回它们或在函数之前定义它们。

例如：

        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中的未定义变量

2 个答案: