提问者:小点点

使用AJAX调用将同一个文件中的JS变量传递给PHP(使用EOD标记)


很难将JS变量传递给PHP变量。 我理解,如果不从客户机传递到服务器,这是无法完成的,因此我尝试通过AJAX调用传递变量。

PHP文件似乎没有收到代码,因为传递的变量在AJAX调用后没有回显。

这是我的代码,虽然最重要的元素就在最后。 我正在尝试将JS变量'selected student'传递回PHP文件。

            $Content3 = <<<EOD

            <form id="myGroupSelectForm" method="post">
              <select id="selectGroup">
                <option>Choose a Group</option>
              </select>
                <select id="selectStudent">
                <option>Choose a Student</option>
              </select>
            </form>

            <script type="text/javascript">

            var select = document.getElementById("selectGroup"); 
            var options = {$js_array_leadersGroupsName}; 
            var i;

            for(i = 0; i < options.length; i++) {
                var opt = options[i];
                var el = document.createElement("option");
                el.textContent = opt;
                el.value = opt;
                select.appendChild(el);
            }

            </script>

            <script>

            var studentList = {$js_array_students_lists}; 
            var select2 = document.getElementById("selectStudent");

            var a = document.getElementById('selectGroup');
            a.addEventListener('change', function() {

                var i;
                for(i = 0; i < options.length; i++) {
                        if ((this.value) == options[i]) {
                            var chosenStudentList = studentList[i];
                        }
                    }

                var select = document.getElementById("selectStudent");
                var length = select.options.length;
                for (i = length-1; i >= 0; i--) {
                  select.options[i] = null;
                }

                var i;
                for(i = 0; i < chosenStudentList.length; i++) {
                    var opt = chosenStudentList[i][0];
                    var el = document.createElement("option");
                    el.textContent = opt;
                    el.value = opt;
                    select2.appendChild(el);
                }

                }, false);

                var b = document.getElementById('selectStudent');
                b.addEventListener('change', function() {
                    var chosenSudent = this.value;
                    $.post('WickCustomLD.php', {variable: chosenSudent});
                    }, false);

            </script>



EOD;


            $Content3 .="\n";
            if(!empty($_POST['variable'])) {
               $chosenStudent = $_POST['variable'];
               echo "<br>";
               echo "<br>";
               echo "<br>";
               echo "<br>";
               echo $chosenStudent;
            }

            return $Content3;  

如果有人能帮上忙,我将非常感激。


共1个答案

匿名用户

这就是正在发生的事情:

  1. 在浏览器的地址栏中键入URL以向服务器发出请求
  2. 服务器运行PHP程序以响应该请求
  3. 浏览器加载响应中的页面并在其中执行JS
  4. JS向URL发出Ajax请求
  5. 服务器运行PHP程序以响应该请求
  6. 浏览器使响应可用于JavaScript
  7. 您的JavaScript将忽略它

来自第4步的请求不会及时返回,并使数据在第2步的PHP程序执行时可用,即使URL相同也不会。

如果您想加载一个全新的页面并将其显示在浏览器窗口中,那么就不要使用Ajax。 使用常规表单提交。

如果您想使用Ajax,那么将API设计成只返回相关数据(通常返回JSON),然后编写JavaScript来处理对请求的响应。 您说过希望将所有内容保存在一个PHP文件中,但是当您将内容分离为离散的单元时,管理代码会更容易。

$.post('WickCustomLD.php', {variable: chosenSudent}).then(function (data) {
    // do something with the data
});