Question

我试图让PHP文件的输出显示在包含表单的原始页面中，而不必刷新页面。

我目前正在使用AJAX这样做，但我无法将提交的PHP文件的值传递回 index.php 页面 - 这需要在不刷新页面的情况下完成

总体

用户输入一些数据并提交表格
该数据通过AJAX传递给PHP文件
然后，通过PHP文件操作的某些数据被回显到原始 index.html 文件中，而不会刷新页面

您将在下面找到我目前用来尝试实现此目的的代码。

的index.php

<form>
    <input type="text" name="hi">
    <input type="submit">
</form>

    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
          });
        });  
      });
    </script>

post.php中

<?php
    echo "Hello";
    $name = $_POST['hi'];
    echo $name . "This is a test";
?>

感谢任何帮助，谢谢！

Answer 1

为对象添加“成功”并将参数传递给函数。这将保存php文件的结果。

$.ajax({
    type: 'post',
    url: 'post.php',
    data: $('form').serialize(),
    success: function(results) {
        console.log(results);
    }
});

这样做，在成功的ajax调用中，将post.php文件发送的所有内容存储到results变量中。在这种情况下，它将是$name和'这是一个测试'。

Answer 2

这个简单的解决方案怎么样？只需将此代码复制并粘贴到名为index.php的文件中，您在输入字段中输入的任何文本都将由PHP输出。希望它有所帮助！

<?php

$data = array();
if(isset($_POST['userText']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])){
 $data = 'The data you entered is: ' . $_POST['userText'];       
 echo json_encode($data);  
 die();      
}
?>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

<form>
<input type="text" name="hi" id = "someID">
<input type="submit" id = "sendInfo">
</form>
<div id = "random"></div>

<script type = "text/javascript">

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

var someText = document.getElementById("someID").value;
var userText =  JSON.stringify(someText);

$.ajax({
  url: "index.php",
  method: "POST",
  dataType: "json",
  data: {userText: userText},
  success: function (result) {
    console.log(result);
    $("#random").html(result);
  }
});
return false;

});

</script>

</body>
</html>

如何在没有页面刷新的情况下将数据从PHP文件传回原始文件？

2 个答案: