动态提交表单并显示输入的值而无需重新加载答案

【问题标题】：Dynamically submit form and show the value of the input without reloading动态提交表单并显示输入的值而无需重新加载
【发布时间】：2018-07-26 03:32:22
【问题描述】：

我想为我的网站创建一个完全动态的聊天 UI，但是如果有人提交按钮，它会重新加载整个页面，这将直接显示 div

<div class="messeging" id="msg">
    <?php  print $message->getName() ." : " . $chat->message . ""; ?> 
</div>

无需重新加载消息将保存在某些 xml 文件路径中，例如 (../user/xml) HTML

<form action="action.php" method="post">
    <input type="text" id="input" value="php echo">
    <input type="submit" value="send" onclick="showDiv()">
</form>

<div class="messeging" id="msg">
    <?php  print $message->getName() ." : " . $chat->message . ""; ?>
</div>

我不太了解 javascript/ajax 如何解决这个问题

【问题讨论】：

查看 websockets、server-sent-events 或 polling，如果不是全部都是“聊天”的例子，那么还有很多 tuts。
How to create html elements in a form, without reloading the page?的可能重复

标签： javascript php

【解决方案1】：

尝试 jquery ajax，在提交按钮上发送最后一个消息以保存到数据库并获取所有记录并将它们显示到聊天页面中。所以每次你发送味精时，它都会获取所有味精。如果您不了解 ajax 的工作原理，请告诉我。

【讨论】：

我不知道该怎么做

【解决方案2】：

首先查看名为“onSubmit”的表单上的事件。 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

一旦您理解了这一点，您就可以在您的“onSubmit”方法处理程序中使用“event.preventDefault()”。或者在英语中，保持表单的默认行为以提交到操作。

在阻止默认操作后，您需要对表单进行一些处理，最新浏览器中最简单的方法是使用 fetch API。 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

您应该能够将表单中的数据提交到某个端点，该端点返回您希望注入的 HTML。

成功返回 HTML 后，将需要使用带有 append (https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) 的简单 document.createElement 方法。

祝你学习网络好运！

【讨论】：