将 HTML 文件中的表单提交到 PHP 文件并以相同的 HTML 显示结果

Question

我需要帮助。 我创建带有 2 个选项卡的 html 文件。第一个选项卡包含接受用户输入并执行某些功能的表单。我希望函数的结果显示在第二个选项卡中。 第一个选项卡中的表单应该向 PHP 脚本提交一个操作。 PHP 脚本位于同一个 HTML 文件中。 我应该在表格中写什么？

非常感谢任何帮助。

编辑1： html 文件是客户端，而 php 是服务器端所以，我应该将 php 脚本分开并将其放在单独的 .php 文件中。所以，我有 2 个文件：“.html”和“.php”。

HTML 文件：

<ul class="nav">
    <li id="TAB0" class="selected"><a href="#TAB0"><em>Run function</em></a></li>
    <li id="TAB1"><a href="#TAB1"><em>Results</em></a></li>
    <li id="TAB2"><a href="TAB2"><em>Help</em></a></li>
</ul>
<div class="content" id="CONTENT">
    <!--TAB0-->
           <div id = "TAB0" class="active">
            <div class="MainContent">
              <form id='myform' enctype='multipart/form-data' name='myForm'  method='post' action="calculateResults.php">
                      SOME INPUTS HERE
                   <p><input type='button' name="mybut" value='Run'></p>
              </form></div></div>
     <!--TAB1-->
           DISPLAY THE RESULT HERE
     <!--TAB2-->

以上代码的实际作用是在新窗口中显示结果。 php 文件已经在一些文本和表格中打印输出结果。 我希望当我单击第一个选项卡中的按钮时执行 .php 文件并在第二个选项卡中显示结果而不是在新窗口中。

有什么帮助吗？ 谢谢，

Answer 1

如果您希望在不提交/重新加载页面的情况下显示数据，则需要使用 ajax 提交表单，而不是如果页面可以在提交后重新加载，您必须在 html 上管理以在数据可用时显示第二个选项卡，如果存在 $_POST 数据，您可以设置一些变量来显示第二个选项卡。

希望对您有所帮助。

Answer 2

您可以编写页面的 URL 并显示未设置第一个选项卡的帖子，如果设置了帖子，则显示第二个选项卡

<?php if(!isset($_POST['submit'])) { ?> 

    <!-- your first tab active here -->

<?php } else { ?>

    <!--your second tab active here-->

<?php } ?>

这还可以帮助您查看用户是否发送表单并处理您希望在第二个选项卡中显示的数据。

如果您使用“活动”类显示/隐藏选项卡，则可以使用 isset() 并将该类放置在您希望可见的正确选项卡中。

这就是表单动作的样子

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">

或者只是普通的 HTML

<form action="http://domain.com/link_to_the_same_page.php" method="post">

如果你想通过 ajax 发送数据，你可以使用 ajax，就像 @itapingu 建议的那样。

<script type = "text/javascript">
     $(document).ready(function() {

        event.preventDefault();

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

            $.ajax({                    
                    url: 'content/your.php',     
                    type: 'post', // performing a POST request
                    data : {
                        name: "John", location: "Boston" // will be accessible in your $_POST[]
                    },
                    dataType: 'json',                   
                    success: function(data)         
                    {
                        // here is the part where you recive the response 
                        // from the php file and place it in your second tab.
                        // You can do something similar to this
                        $('#my_second_tab').html($(data).find('#my_second_tab'));

                      },
                      error: function() {
                         alert ('An error occurred');
                      }
                });
            });
         });
    });
</script>

这种方式并不重要你在表单动作属性中放置什么。这个 sn-p 只是检测到您的 #submit 按钮上的点击并触发 ajax 进程。

您还应该查看 jQuery 站点上有关 ajax 的文档。 https://api.jquery.com/jQuery.ajax/

希望这可以帮助你交配。顺便说一句，不要忘记包含主 jquery 库。