Javascript 无法使用jquery ajax实现follow unfollow按钮
场景:follow和unfollow操作的数据库部分工作正常。jquery和ajax部分一定存在一些问题,因为只有在刷新页面而不是单击之后,按钮才会从follow变为unfollow(很少使用css样式)。如果不刷新,则无法多次单击按钮。这里是jquery部分Javascript 无法使用jquery ajax实现follow unfollow按钮,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,场景:follow和unfollow操作的数据库部分工作正常。jquery和ajax部分一定存在一些问题,因为只有在刷新页面而不是单击之后,按钮才会从follow变为unfollow(很少使用css样式)。如果不刷新,则无法多次单击按钮。这里是jquery部分 <script> function addfollow(friend,action) { $.ajax({ url:"follow.php", data:'friend='+fri
<script>
function addfollow(friend,action)
{
$.ajax({
url:"follow.php",
data:'friend='+friend+'&action='+action,
type:"POST",
success:function(data){
switch(action){
case "follow":
$("#"+friend).html('<input type="submit" id="'+friend+'" class="unfollow" value="unfollow" onClick="addfollow('+friend+',\'unfollow\')"/>');
break;
case "unfollow":
$("#"+friend).html('<input type="submit" id="'+friend+'" class="follow" value="follow" onClick="addfollow('+friend+',\'follow\')"/>');
break;
}
}
});
}
</script>
函数addfollow(朋友、动作)
{
$.ajax({
url:“follow.php”,
数据:'friend='+friend+'&action='+action,
类型:“POST”,
成功:功能(数据){
开关(动作){
案例“遵循”:
$(“#”+friend.html(“”);
打破
案例“unfollow”:
$(“#”+friend.html(“”);
打破
}
}
});
}
下面是调用上述方法的html+php代码
<?php
$action="follow";
if()//php code to check if user is already a follower
{
$action="unfollow";
}
$friend=$name;
?>
<div class="col-sm-12">
<input type="submit" id="<?php echo $friend;?>" class="<?php echo $action;?>" value="<?php echo $action?>" onClick="addfollow('<?php echo $friend;?>','<?php echo $action;?>')">
</div>
。将在匹配的元素内部获取/设置html。这不是你想要的。尝试删除当前元素并用其他元素替换它
编辑:
如果采用更以javascript为中心的方法,您的运气可能会更好。用php编写javascript可能会令人困惑
如果您的php代码只是创建了如下所示的元素
<button> data-friend-id="<?php echo $friend;?>" class="follow-button <?php echo $action;?>" data-following="true"></button>
在第一次ajax调用之后,您将得到两个id为Friends的元素。谢谢您的建议。我实现了它,现在按钮正在更改onclick,但是单击两次(不刷新页面),它可能会在这一部分给出错误:onclick=“addfollow(“+friend+”,“'unfollow\”)。错误是-ReferenceError:bunny没有在HTMLInputElement.onclick上定义(假设bunny是friend的值),如果我将onclick部分更改为onclick=“addfollow(\'bunny\',\'unfollow\”)”按钮至少对bunny用户来说工作正常。似乎在onClick函数中应该如何传递friend变量存在一些问题
//Set a click handler on the follow buttons.
$('.follow-button').click(handleFollowClick);
function handleFollowClick() {
var $button, friend_id, action;
// jQuery will set 'this' to the button that was clicked.
$button = $(this);
// Extract data from the button.
friend = $button.data('friend-id');
action = $button.data('following') === 'true' ? 'unfollow' : 'follow';
$.ajax({
url:"follow.php",
data:'friend='+friend+'&action='+action,
type:"POST",
success:function(data){ toggleFollow($button)}
});
}
//You could actually get away with styling the button default as
//not-following. Then just $button.toggleClass('follow'); but
//this is consistent with your existing approach.
toggleFollow($button) {
if ($button.data('following') === 'true) {
$button.data('following', 'false');
$button.removeClass('unfollow');
$button.addClass('follow');
} else {
$button.data('following', 'true');
$button.removeClass('follow');
$button.addClass('unfollow');
}
}