Question

我想为我的网站创建一个完全动态的聊天界面，但是如果有人提交按钮，它将重新加载整个页面，这将直接显示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如何解决此问题

Answer 1

尝试jquery ajax，在“提交”按钮上发送最后一个味精以保存到db中，并提取所有记录并将其显示在聊天页面中。因此，每当您发送味精时，它将获取所有味精。如果您不了解Ajax的工作原理，请告诉我。

Answer 2

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

一旦您了解了这一点，就可以在“ onSubmit”方法处理程序中使用“ event.preventDefault（）”。或用英语，保留表单的默认行为，以防止提交给操作。

阻止默认操作后，您将需要对表单进行某些操作，而在最新的浏览器中，最简单的方法就是使用访存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方法。

祝您学习网络愉快！

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

2 个答案: