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

【问题标题】：Undefined variables in PHP after sending data via Ajax通过 Ajax 发送数据后 PHP 中未定义的变量
【发布时间】：2018-10-18 21:17:28
【问题描述】：

我正在尝试通过 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 );
?>

这个脚本的错误在哪里。

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

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

【问题讨论】：

console.log(ArticleTitle) in js 先看看它给你什么
@delboy1978uk 说找不到变量。
是的，看起来你正在向它发送一个空变量。

标签： php ajax forms backend

【解决方案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()函数之外是不可用的。

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

例如：

        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，则需要同样对待它。

【讨论】：

我将它移出 CheckFields() 函数我可以记录它，但响应相同（“未定义”）。
@Techguy 那么dataToSend 在您发送之前包含什么？
我做了 console.log(dataToSend);输出为：ArticleTitleData=undefined&ArticleContentData=undefined&ArticleFileNameData=undefined

【解决方案2】：

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

感谢大家帮助我...

【讨论】：