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

Question

我的 PHP 页面有提交按钮到另一个 URL。

我想在点击submit按钮后重新加载当前页面，并将div添加到HTML中。

我的页面网址是:/foo.php，在 HTML 中我有:

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

如您所见，表单将请求发送到 /bar 页面。

我想重新加载 /foo.php (当前页面)，并将 HTML 更改为:

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

我的问题是我如何知道用户单击按钮并且刷新是因为单击，而不是因为导航。

另一件事，如果可能的话，我希望如果用户再次刷新页面，新的 div 将消失。

Answer 1

为什么不直接将 div 附加到 get 函数的成功回调中呢？您无需重新加载页面。

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

顺便说一句，我几乎不建议将 javascript 与 html 分开，而不是直接将其放在 DOM 中。

另一种方法是，向同一侧触发带有隐藏参数的附加表单。之后，您在服务器端检查隐藏参数并显示 div。

第三种方法是，在回调中设置cookie，重新加载侧面，检查cookie，显示div并再次删除cookie。

在我看来，第一个提到的选项(直接在回调中添加 div 而不重新加载)将是迄今为止“最漂亮的”，但当然我不知道您的网站上还发生了什么