jquery 使用ajaxt添加评论列表
时间: 2023-07-11 14:12:11 浏览: 48
好的,使用 AJAX 添加评论列表可以让用户在不刷新页面的情况下添加评论。以下是一个基本的示例:
HTML 代码:
```html
<div id="comment-list">
<!-- 评论列表 -->
</div>
<form id="comment-form">
<!-- 评论表单 -->
<input type="text" name="name" placeholder="Name">
<textarea name="comment" placeholder="Comment"></textarea>
<button type="submit">Add Comment</button>
</form>
```
jQuery 代码:
```javascript
$(document).ready(function() {
// 当表单提交时,发送 AJAX 请求
$('#comment-form').submit(function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单数据
var formData = $(this).serialize();
// 发送 AJAX 请求
$.ajax({
type: 'POST', // 请求类型
url: 'add_comment.php', // 处理请求的 PHP 文件
data: formData, // 发送的数据
success: function(response) {
// 请求成功后,将新的评论添加到评论列表
$('#comment-list').append(response);
// 清空表单
$('#comment-form')[0].reset();
}
});
});
});
```
在这个示例中,我们使用 jQuery 的 `submit()` 方法来捕获表单提交事件。然后,我们使用 `serialize()` 方法来获取表单数据,发送一个 POST 请求到 `add_comment.php` 文件,并在请求成功后将返回的评论数据添加到评论列表。最后,我们使用 `reset()` 方法清空表单。