html实现点击关注,再点击取消关注并提交到后端
时间: 2023-12-03 14:43:10 浏览: 48
首先,在 HTML 中需要定义一个按钮或链接,例如:
```html
<button id="followBtn" onclick="follow()">关注</button>
```
这里定义了一个 id 为 "followBtn" 的按钮,并且指定了一个 onclick 事件,当点击按钮时会触发名为 "follow" 的 JavaScript 函数。
接下来,需要实现 "follow" 函数来处理关注和取消关注的逻辑。可以通过 AJAX 向后端发送请求,示例代码如下:
```javascript
function follow() {
var followBtn = document.getElementById("followBtn");
var isFollowed = (followBtn.innerText === "取消关注");
// 发送 AJAX 请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 根据后端返回的结果来更新按钮文本
var response = xmlhttp.responseText;
if (response === "success") {
followBtn.innerText = isFollowed ? "关注" : "取消关注";
}
}
};
xmlhttp.open("POST", "/follow", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("isFollowed=" + isFollowed);
}
```
在这个函数中,首先获取按钮元素和当前关注状态。然后使用 AJAX 向后端发送 POST 请求,将当前关注状态作为参数传递给后端。当后端处理完请求后,会返回一个结果,根据这个结果来更新按钮文本。
最后,在后端接收到这个请求时,根据传递的参数进行相应的处理,例如将用户添加到关注列表或从关注列表中删除用户。处理完成后,返回一个 "success" 字符串表示操作成功。