使用JavaScript调用php函数时，php $ _POST返回空

Question

I am still studying php and java script. 我还在学习php和java脚本。 I am creating a simple contact form and set the form action to the same page using $_Server[php_self] 我正在创建一个简单的联系表单，并使用$ _Server [php_self]将表单操作设置为同一页面

What I want to do is when someone submit to my form, it will show a message including the name that was submitted on the same page. 我要做的是，当有人提交给我的表单时，它将显示一条消息，其中包括在同一页面上提交的名称。 replace the contact form with the message. 用消息替换联系表。

I also tried pointing action to a different php page. 我也尝试将动作指向另一个PHP页面。 and it still did not work. 而且仍然没有用。 Does Javascript work like that? Javascript可以那样工作吗？ or I have to use different code or language to do that. 或者我必须使用不同的代码或语言来做到这一点。

Here is my code 这是我的代码

 <!DOCTYPE html> <html> <head> <?php include 'action.php'; ?> <title> My profle</title> <meta name="robots" content="noindex"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="contact"> <form class="form" class="contact" id="contact-form" action="action.php" method="POST"> Name: <br> <input type="text" class="field" name="name"><br> Number:<br> <input type="text" class="field" name="number"><br> Email:<br> <input type="email" class="field" name="email:>"<br> <br> <input type="submit" class="submit" name="submit" value="submit" onclick ="document.getElementById('contact-form').innerHTML='<?php thankyou();?>'"> </form> </div> </body> </html>

Then here is the action.php 然后这是action.php

 <?php function thankyou(){ $name = $_POST['name']; echo "Thank you"." $name ! Your message has been submitted."; } ?>

Answer 1

You have a couple of different problems here. 您在这里有几个不同的问题。

The first is a lack of understanding about the timing of when PHP and JS run. 首先是对PHP和JS的运行时间缺乏了解。

The second is that DOM changes are lost when a new page is loaded. 第二个是在加载新页面时DOM更改丢失。

This is what is happening: 这是正在发生的事情：

The browser requests the page 浏览器请求页面
The PHP runs ( $_POST does not have a name key) PHP运行（ $_POST没有name键）
The browser gets the page 浏览器获取页面
You click the submit button 您单击提交按钮
The JavaScript runs, and set the innerHTML (remember that the PHP ran back at step 2) JavaScript运行，并设置了innerHTML （请记住，PHP在步骤2中返回了）
The form submits causing the browser to navigate to a new page 表单提交导致浏览器导航到新页面
The PHP runs again PHP再次运行
The browser gets the new page … and the DOM changes make to the previous page are lost 浏览器将获取新页面……而对上一页所做的DOM更改将丢失

Further reading: What is the difference between client-side and server-side programming? 进一步阅读：客户端编程和服务器端编程有什么区别？ . 。

Answer 2

I'm open to hearing better ways to do this in the comments, as this is off the top of my head and I know there are better solutions... but here's what I would do in your situation: 我很乐意在评论中听到更好的方法来做到这一点，因为这已经超出了我的头脑，而且我知道有更好的解决方案……但是，在您遇到的情况下，我将做以下事情：

<!DOCTYPE html>
<html>
<head>
    <title> My profle</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div class="contact">
   <form class="form" class="contact" id="contact-form" action="" method="POST">
           <?php 
               if(isset($_POST)){
                   //process data however (I'm assuming) you need to - even if just posting to another script at this point...
                   echo 'Thank you '.$_POST['name'].' ! Your message has been submitted';
               }
               else{
                    echo 'Name: <br>
                    <input type="text" class="field" name="name"><br>
                    Number:<br>
                    <input type="text" class="field" name="number"><br>
                    Email:<br>
                    <input type="email" class="field" name="email"><br>
                    <br>
                    <input type="submit" class="submit" name="submit" value="submit">';
               }
           ?>
       </form>
</div>
</body>
</html>

使用JavaScript调用php函数时，php $ _POST返回空

问题描述

2 个解决方案

解决方案1
3 2018-05-29 22:34:23

解决方案2
0 2018-05-29 22:53:46

使用JavaScript调用php函数时，php $ _POST返回空

问题描述

2 个解决方案

解决方案1 3 2018-05-29 22:34:23

解决方案2 0 2018-05-29 22:53:46

解决方案1
3 2018-05-29 22:34:23

解决方案2
0 2018-05-29 22:53:46