Javascript 使用AJAX将变量传递到页面并在PHP中返回这些变量_Javascript_Php_Ajax

Javascript 使用AJAX将变量传递到页面并在PHP中返回这些变量

javascript php ajax

Javascript 使用AJAX将变量传递到页面并在PHP中返回这些变量,javascript,php,ajax,Javascript,Php,Ajax,我正在尝试做一些我认为非常简单的事情：使用AJAX将表单数据传递到PHP页面，然后返回PHP的结果编辑后添加：正如现在编写的，由于某些原因，它只会偶尔成功返回，而不是每次运行时都成功返回编辑添加（2020年5月30日）：我可以通过如下方式更改ajax使其正常工作： <script> $(document).ready(function(){ $("#button").click(funct

我正在尝试做一些我认为非常简单的事情：使用AJAX将表单数据传递到PHP页面，然后返回PHP的结果

编辑后添加：正如现在编写的，由于某些原因，它只会偶尔成功返回，而不是每次运行时都成功返回

编辑添加（2020年5月30日）：

我可以通过如下方式更改ajax使其正常工作：

<script>
                    $(document).ready(function(){

                        $("#button").click(function(){

                            var DDD_Number=$("#DDD_Number").val();
                            var Manager_Review=$("#Manager_Review").val();
                            var dataTosend='?DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
                            $.ajax({
                                type: "GET",
                                url:'showme.php' + dataTosend,
                                data:dataTosend,
                                async: false,
                              success:function(data){
                                    document.getElementById('txtresponse').innerHTML = "Success.";
                                    document.getElementById('thisworks').innerHTML = data;
                                },
                                error: function(data){
                                   document.getElementById('txtresponse').innerHTML = "failure.";
                               }
                            }); 
                        });
                    });
            </script>


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var DDD_Number=$（“#DDD_Number”）.val（）；
var Manager_Review=$（“#Manager_Review”）.val（）；
var dataTosend='？DDD_编号='+DDD_编号+'&经理审查='+经理审查；
$.ajax({
键入：“获取”，
url:'showme.php'+dataTosend，
数据：dataTosend，
async:false，
成功：功能（数据）{
document.getElementById（'txtresponse'）。innerHTML=“成功。”；
document.getElementById（'thisworks'）。innerHTML=数据；
},
错误：函数（数据）{
document.getElementById（'txtresponse'）。innerHTML=“失败。”；
}
}); 
});
});

现在我必须对表单进行序列化，因为实际上我需要传递多行。不过，我不知道我是否需要把它作为第二个问题

这是我的主页：

<html>
        <head>
            <script src="Scripts/jquery.min.js"></script>
            <script src="Scripts/jquery-2.1.3.min.js"></script>
            <script type="text/javascript" src="Scripts/jquery.plugin.min.js"></script>
            <script type="text/javascript" src="Scripts/jquery.datepick.min.js"></script>
            <script>
                    $(document).ready(function(){

                        $("#button").click(function(){
                            var DDD_Number=$("#DDD_Number").val();
                            var Manager_Review=$("Manager_Review").val();
                            var dataTosend='DDD_Number='+DDD_Number+'&Manager_Review='+Manager_Review;
                            $.ajax({
                                type: "POST",
                                url:'showme.php',
                                data:dataTosend,
                                async: true,
                               success:function(data){
                                   document.getElementById('txtresponse').innerHTML = "Success.";
                                   document.getElementById('thisworks').innerHTML = "Successful.";

                               },
                                error: function(data){
                                    console.log(data);
                                   document.getElementById('txtresponse').innerHTML = "failure.";
                                   console.log(data);
                               }
                            });
                        });
                    });
            </script>
        </head>
    <body>
        <form id="dddform" method="post">
            <input type="text" id="DDD_Number" name="DDD_Number"><br>
            <input type="text" id="Manager_Review" name="Manager_Review"><br>
            <button id="button" name="Submit">Click Me</button>
        </form>
        <div id="txtresponse"></div>
        <div id="thisworks"><?php if(!isset($_POST['Submit'])){echo $Manager_Review;} ?></div> 

            </div>
    </body>
</html>


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
var DDD_Number=$（“#DDD_Number”）.val（）；
var Manager_Review=$（“Manager_Review”）.val（）；
var dataTosend='DDD'编号='+DDD'编号+'&经理审查='+经理审查；
$.ajax({
类型：“POST”，
url:'showme.php'，
数据：dataTosend，
async:true，
成功：功能（数据）{
document.getElementById（'txtresponse'）。innerHTML=“成功。”；
document.getElementById（'thisworks'）。innerHTML=“成功。”；
},
错误：函数（数据）{
控制台日志（数据）；
document.getElementById（'txtresponse'）。innerHTML=“失败。”；
控制台日志（数据）；
}
});
});
});




点击我

这是showme.php：

<?php

$Manager_Review_Date = $_POST['Manager_Review'];

echo $Manager_Review_Date;

?>
<script language = 'Javascript'>
    document.getElementById('thisworks').innerHTML = '<?php echo $Manager_Review_Date; ?>';
</script>


document.getElementById（'thisworks'）。innerHTML=''；

通话成功。（显示“Success”和“Successful”消息），但我无法将$Manager\u Review\u Date的值显示在“thisworks”分区中

有什么建议吗？我对AJAX相当陌生（如果你不能从我的代码中分辨出来的话）。

你的php应该是：

<?php
$Manager_Review_Date = $_POST['Manager_Review'];
echo $Manager_Review_Date;
// NO javascript here

首先，感谢您的快速回复。：）当返回时，“数据”是未定义的。另一件我觉得奇怪的事是，这只是偶尔起作用。如果我连续运行两次，“成功”不会回来。我必须刷新页面，它才能再次工作。

success:function(data){
    document.getElementById('txtresponse').innerHTML = "Success.";
    document.getElementById('thisworks').innerHTML = data;
},