场景:页面显示动态生成的按钮(锚点),每个按钮和一个公共类具有唯一的ID。使用类我在jquery中检索id并将其传递给控制器进行处理。虽然我可以点击以下内容并将其更改为以下内容,但我无法将其切换回来。 它给了我"服务器响应状态为500"。
ajax代码
$(document).ready(function() {
$("body").on(
'click',
'.follow',
function(event) {
debugger;
event.preventDefault();
var cur = "#" + this.id;
var toFollow = {
"followeeID" : this.id
};
$.ajax({
url : "../follow/add",
data : toFollow,
dataType : 'json',
type : "POST",
success : function(data) {
if (data) {
console.log(data);
console.log(cur);
$(cur).removeClass("btn-default")
.addClass("btn-success");
$(cur).removeClass("follow").addClass(
"follow");
$(cur).html("Following");
} else {
console.log(data);
$(cur).addClass("btn-default")
.removeClass("btn-success");
$(cur).removeClass("follow").addClass(
"follow");
$(cur).html("Follow");
}
}
})
});
});
html代码
<c:otherwise>
<table class="table table-stripped table-hover">
<tr>
<th>User Name</th>
<th></th>
</tr>
<c:forEach items="${requestScope.userlist}" var="user">
<c:choose>
<c:when test="${user.personID==sessionScope.user.personID}">
<tr>
<td>${user.username}</td>
<td></td>
</tr>
</c:when>
<c:when test="${user.followers.contains(sessionScope.user)}">
<tr>
<td>${user.username}</td>
<td><a class="btn btn-success unfollow" href="#"
id="${user.personID}">Following</a></td>
</tr>
</c:when>
<c:otherwise>
<tr>
<td>${user.username}</td>
<td><a class="btn btn-default follow" href="#"
id="${user.personID}">Follow</a></td>
</tr>
</c:otherwise>
</c:choose>
</c:forEach>
</table>
</c:otherwise>
控制器代码
@RequestMapping(value = "/follow/add", method = RequestMethod.POST, produces = "application/json")
@ResponseBody
public boolean addFollower(HttpServletRequest request, @RequestParam String followeeID) throws Exception {
System.out.println("reached controller");
boolean flag = false;
int id = Integer.parseInt(followeeID);
HttpSession session = request.getSession();
User follower = (User) session.getAttribute("user");
try {
User followee = (User) followerDao.get(id);
if (followee.getFollowers().contains(follower)) {
followee.getFollowers().remove(follower);
System.out.println("removed");
flag=followerDao.removeFollower(followee);
} else {
followee.getFollowers().add(follower);
System.out.println("added");
flag=followerDao.addFollower(followee);
}
} catch (FollowerException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return flag;
}
答案 0 :(得分:0)
jQuery
内部$(document).ready
函数内的代码仅在Windows成功加载时适用于可用的DOM
元素,
因此,为了使其适用于动态添加按钮,您应该使用如下所示的事件绑定:
$(document).on(
'click',
'.follow',
function(event) {
debugger;
event.preventDefault();
var cur = "#" + this.id;
var toFollow = {
"followeeID" : this.id
};
$.ajax({
url : "../follow/add",
data : toFollow,
dataType : 'json',
type : "POST",
success : function(data) {
if (data) {
console.log(data);
console.log(cur);
$(cur).removeClass("btn-default")
.addClass("btn-success");
$(cur).removeClass("follow").addClass(
"follow");
$(cur).html("Following");
} else {
console.log(data);
$(cur).addClass("btn-default")
.removeClass("btn-success");
$(cur).removeClass("follow").addClass(
"follow");
$(cur).html("Follow");
}
}
})
});
});
确保确保在$(document).ready
函数