单击提交按钮时，在PHP的同一页面上临时更改HTML结构吗？

Question

I have PHP page that have submit button to another URL.

I want to reload the current page after the submit button clicked, and add div to the HTML.

My page url is: /foo.php , and in the HTML I have:

<button onclick="$.get('/bar', function() { ... })">Submit</button>

As you can see the form sends request to /bar page.

I want to reload the /foo.php (the current page), and change the HTML to:

<button onclick="$.get('/bar', function() { ... })">Submit</button>
<div>Thank you!</div>

My problem is how can I know that the user click on the button and the refresh was because the click, and not because just navigating.

Another thing, if it possible, I want that the new div will disappear if the user refresh the page again.

Answer 1

Why don't you just append the div in the success callback of the get function? You wouldn't have to reload the page.

<div id="btn_area">
    <button onclick="$.get('/bar', function() { $('#btn_area').append($('<div>').html('Thank You');)})">Submit</button>
</div>

By the way, i hardly recommend to separate the javascript from the html and not put it directli in the DOM.

Another Method would be, to fire an additional form with a hidden parameter to the same side. After that, you check on the serverside the hidden parameter and display the div.

A third method is, to set a cookie in the Callback, reload the side, check the cookie, display the div and remove the cookie again.

In my opinion, the first mentioned option (add the div directly in the callback without reloading) would be by far the 'prettiest', but of course i don't know what else is going on on your site

Answer 2

Demo

You can handle that in js side. Just make your request, and in callback, you can manipulate dom. You can see below;

<button>Submit</button>

$("button").on("click", function() {
   var $button = $(this);
   $.get("/echo/html", function() {
       $button.after("<div>Thank you!</div>");
   });
});

Answer 3

Alternatively, you could simulate a flash session (one time use session) if you opt to do this in PHP. Consider this example:

foo.php

<?php session_start(); ?>

<form method="POST" action="bar.php">
    <button type="submit" name="thank_you">Submit</button>
</form>
<?php if(isset($_SESSION['thank_you'])): ?>
<?php unset($_SESSION['thank_you']); ?>
    <h1>Thank You!</h1>
<?php endif; ?>

bar.php

<?php
session_start();

if(isset($_POST['thank_you'])) {
    $_SESSION['thank_you'] = true;
    // processes
    header('Location: foo.php');
}

?>