将表单数据提交到另一个 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 页面中。

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

谢谢！

Answer 1

表单视图：-

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

输入字段中的 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!!!

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

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

但是第一个例子只是形式和 PHP。

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

Submit a form data to another php page but display the result back to the same page from where the form was submitted?

html

javascript

php

session

jquery