person github
It’s a good idea to add user feedback functionality to your web pages, as it can help you collect your users’ opinions and suggestions. Here are the basic steps and code examples for implementing user feedback functionality:
- Create an HTML form :
First, you need to create a form on your web page that allows users to enter their feedback.
<form id="feedback-form">
<label for="feedback">请提供您的反馈：</label><br>
<textarea id="feedback" name="feedback" rows="4" cols="50" required></textarea><br>
<input type="submit" value="提交">
</form>
- Handling form submissions :
When a user submits a form, you need to write JavaScript code to handle the submitted data.
document.getElementById('feedback-form').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单的默认提交行为
const feedback = document.getElementById('feedback').value;
// 这里可以将反馈发送到服务器
sendFeedbackToServer(feedback);
});
function sendFeedbackToServer(feedback) {
// 使用AJAX或Fetch API将反馈发送到服务器
fetch('/feedback', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
feedback: feedback }),
})
.then(response => response.json())
.then(data => {
console.log('反馈成功发送：', data);
})
.catch(error => {
console.error('发送反馈时出错：', error);
});
}
- Server-side processing :
On the server side, you need to have an endpoint to receive and process user feedback. The exact code depends on the server-side technology and framework you use.
// 以下是一个使用Express.js的简单示例
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/feedback', function(req, res) {
const feedback = req.body.feedback;
// 在这里可以将反馈保存到数据库或发送电子邮件通知
saveFeedback(feedback);
res.json({
message: '感谢您的反馈！' });
});
function saveFeedback(feedback) {
// ... 保存反馈的代码 ...
}
app.listen(3000, function() {
console.log('服务器正在监听端口3000');
});
In this example, we created a simple feedback form, wrote the JavaScript code to handle form submission, and provided an example of server-side handling of feedback. In a real project, you may need to adjust the code based on your specific needs and technology stack.