我是Web开发的新手。我现在正在学习JavaScript
(JQuery
),我选择Simple Chat作为入门项目。不幸的是,我不知道如何防止页面在消息发送后刷新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Chat</title>
</head>
<body>
<h1>Chat room</h1>
<div id="status"></div>
<form id="send" class="ajax" action="action.php" method="POST">
<label for="fname">Type your message</label>
<input type="text" id="fname" name="myMessage">
<input id="upload" type="submit" name="myButton"value="Submit" />
</form>
<div id="result"></div>
<script>
$(document).ready(function () {
$("form").submit(function (event) {
var formData = {
name: $("#fname").val(),
};
var posting = $.post(url, {
name: $('#fname').val(),
});
/* So far, just listing whether the Form has managed to prevent its classic sending */
posting.done(function(data) {
$('#result').text('success');
});
$.ajax({
type: "POST",
url: "process.php",
data: formData,
dataType: "json",
encode: true,
}).done(function (data) {
console.log(data);
});
event.preventDefault();
});
});
</script>
</body>
</html>
PHP代码:
<?php
$path = 'messages.txt';
if (isset($_POST['myButton']) ) {
$fh = fopen($path,"a");
$string = $_POST['myMessage' ];
fwrite($fh,$string . PHP_EOL);
fclose($fh);
}
?>
我已经创建了一个文本文件messages.txt
,我想在其中保存使用 AJAX 新建的消息。我希望新添加的消息显示在聊天页面下方(在div
与id #result
中)
2条答案
按热度按时间kpbpu0081#
谢谢 大家 的 建议 , 我 就是 这样 解决 的
中 的 每 一 个
mec1mxoz2#
要 使用 此 jquery ajax 代码 将 数据 保存 到 PHP 中 的 文件 , 请 尝试 以下 操作 :
中 的 每 一 个