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


Submit form in HTML file to PHP file and display result in the same HTML

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

任何帮助都非常感谢。

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

文件:

<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文件并在第二个选项卡中显示结果,而不是在新窗口中。

请帮忙吗?谢谢

如果您希望在不

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

希望这有帮助。

您可以编写页面的 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>

这种方式在表单操作属性中放置什么并不重要。此代码段只是检测单击 #submit 按钮并触发 ajax 进程。

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

希望这对你有帮助。顺便说一下,不要忘记包含主jquery库。