将表单数据提交到另一个 php 页面，但将结果显示回提交表单的同一页面？

Question

我有一个表单，用于从我的 home.php 页面向 image.php 发送数据。

<form class="d-flex" action="" method="post">
<input class="rounded-0 form-control" type="text" name = "name" placeholder="Explore. . ." aria-label="Search">
<button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search"></i></button>
</form>   

当我输入action = "image.php" 时，页面会将我带到 image.php 页面并显示我想要的内容，即我在搜索表单中键入的图像。但是我想要的是保持action="home.php" 在同一页面上的操作，但在提交表单后取回图像并将其显示在 home.php 页面中。

我听说 Sessions 是解决此问题的好方法，但我不知道如何在提交表单后将其显示回同一页面。我知道解决这个问题的一种方法是将 image.php 代码放在 home.php 页面中，但我将代码分开以保持更清洁。

谢谢！

Answer 1

表单视图：-

make a id="createForm" in your <form>

and id = "name" 在输入字段中。

<form id="createForm" class="d-flex" action="" method="post">
<input class="rounded-0 form-control" type="text" name = "name" id = "name" placeholder="Explore. . ." aria-label="Search">
<button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search"></i></button>
</form>

Jquery Ajax 代码：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function() { 
  $('#createForm').on('submit', function(e){
          e.preventDefault();   
           var name = $('#name').val(); 
               
        $.ajax({
          type: "POST",
          url: "data.php",
          data: {name: name},
          success: function(data){
            $("#createForm")[0].reset();
             $('#table1').html(data);
          }
        });   
        
    });
});
</script>

在您的 HTML 中

<div id="table1"> 
    //Let jQuery AJAX Change This Text  
</div>

data.php 页面

<?php
//data.php
if(isset($_POST["name"]))
{
$name = $_POST["name"];
// select query with where clause name condition
echo $output;
}
?>

Answer 2

您可以通过多种方式执行此操作，这完全取决于第二个文件中发生的情况 - 我们是呆在那里还是只是回复第一个文件？因为你可以：

第一个文件：

<?php

if(isset($_GET['response'])){
    echo 'The response: ' . $_GET['response'];
} else {
    ?>
        <form id="createForm" class="d-flex" action="2nd.php" method="post">
            <input class="rounded-0 form-control" type="text" name = "name" id = "name" placeholder="Explore. . ." aria-label="Search">
            <button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search">go</i></button>
        </form>
    <?php
}

第二个文件：

<?php

$name = $_POST['name'] . " - Received!!!";

header("Location: 1st.php?response=$name");

响应将在 1st.php 中：

The response: SomeNameValue - Received!!!

这是一种非常非常简单的方法 - 当 $_GET['response'] 存在时，在第一个文件中使用标头和 $_GET 方法，它会显示响应并跳过表单...

如果您打算在 2nd.php 文件中显示某些内容，那么您可以使用标头，但您可以创建另一个表单并在隐藏输入中发送响应或使用 Javascript 到 window.location.assign("1st. php?response=") 其中 $name 变量是我们在 2nd.php 中处理后的 $_POST['name']。

但第一个例子只是表单和 PHP。