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

Posted 2023-02-24

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

【英文标题】：Submit a form data to another php page but display the result back to the same page from where the form was submitted?

【发布时间】：2021-11-13 21:02:12

【问题描述】：

我有一个表单，用于从我的 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 页面中，但我将代码分开以保持更清洁。

谢谢！

【问题讨论】：

您可以使用 Ajax 提交表单。这样，浏览器不会重定向到 image.php，而是在后台发出请求。然后您可以使用 javascript 显示响应。

您可以使用关键字“jquery ajax”搜索解决方案。

为此使用 jquery ajax 概念。

【参考方案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;

?>

【讨论】：

嗨库马尔。非常感谢。该代码部分工作。内容显示在 id 为 table1 的 div 中，但我认为没有发布该值。从上面的代码中，我在 process.php 文件中写了echo '<br /> Hi' .$_POST["name"]. ' <br />';，但除了 id 为 table1 的 div 中的“hi”之外，什么都没有显示。我如何访问发布的值？

@Mahim Enterprises 现在检查我的答案。

@Mahim Enterprises 如果您的问题得到解决，请回答标记为已接受的答案。

【参考方案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。

【讨论】：

嘿，谢谢，但我使用 ajax 和 jquery 解决了这个问题，答案如下。