Fatal编程技术网
  • javascript/
  • Javascript 不使用表单，不提交，但页面刷新-为什么？

Javascript 不使用表单，不提交，但页面刷新-为什么？

javascript jquery

Javascript 不使用表单，不提交，但页面刷新-为什么？,javascript,jquery,Javascript,Jquery,下面的代码不使用表单，也不进行提交，但单击按钮后页面将重新加载。根据我读到的所有内容，不应重新加载。我不明白为什么。有人能帮忙吗 我还尝试向按钮添加事件函数（请参阅更新的源代码），并更新了下面的源代码。它现在确实起作用了 <SCRIPT> $( document ).ready(function() { $('input[type=button]').hover(function() { $(this).toggleClass('ui-state-h

下面的代码不使用表单，也不进行提交，但单击按钮后页面将重新加载。根据我读到的所有内容，不应重新加载。我不明白为什么。有人能帮忙吗

我还尝试向按钮添加事件函数（请参阅更新的源代码），并更新了下面的源代码。它现在确实起作用了

<SCRIPT>
    $( document ).ready(function() {

    $('input[type=button]').hover(function() {
        $(this).toggleClass('ui-state-hover');
    });

    // get the php vars into local vars
    var req_status = '<?=$req_status?>';
    var member_id  = '<?=$mbr_id?>';
    var group_id   = '<?=$grp_id?>';

    if (req_status == 'member-is-grp-ldr') {
        $("#ok").prop('value', 'Unsubscribe'); 
        $('#ok').prop('disabled',true);
        $('#ok').addClass('ui-state-disabled');
    } else if (req_status == 'member-not-in-group') {
        $("#ok").prop('value', 'Resubscribe'); 
        $('#ok').prop('disabled',false);
    } else if (req_status == 'member-removed') {
        $("#ok").prop('value', 'Resubscribe'); 
        $('#ok').prop('disabled',false);
        $("#close").prop('value', 'Close');
    } else {
        $("#ok").prop('value', 'Unsubscribe'); 
        $('#ok').prop("disabled",false);
    }

   $('#ok').on('click', function(e) { 
        e.preventDefault();
        if ($('#ok').val() == "Unsubscribe") {
            $.post('./ajax_group_unsubscribe.php', {function:'unsubscribe', member_id:member_id, group_id:group_id}, function(status) {
                if (status = 'true') {
                    $("#ok").prop('value', 'Resubscribe'); 
                    $('#ok').prop('disabled',false);
                    $('#ok').removeClass('ui-state-disabled');
                    $("#close").prop('value', 'Close'); 
                    document.getElementById('remark').innerHTML = "You have been removed from the group:";  
                };
            });
        } else if ($('#ok').val() == "Resubscribe") {
            $.post('./ajax_group_unsubscribe.php', {function:'subscribe', member_id:member_id, group_id:group_id }, function(status) {                  
                if (status = 'true') {
                    $("#ok").prop('value', 'Unsubscribe'); 
                    $('#ok').prop('disabled',false);
                    $('#ok').removeClass('ui-state-disabled');
                    $("#close").prop('value', 'Close');
                    document.getElementById('remark').innerHTML = "You have been added to the group:";      
                };
            });
        }
    });
});

</SCRIPT>
</HEAD>

<BODY>
    <div id="page-wrap">
        <div id="header_wrapper">
            Group Unsubscribe Request
        </div>
        <div id="groups_bg">
            <?php
                if ($req_status == "member-in-group") {
                    echo "<p id='remark'>Confirm you no longer want to receive messages for the group:</p>";
                    echo "<p><em>" . $grp_name . "</em></p>";
                } else if ($req_status == "member-not-in-group") {
                    echo "<p id='remark'>You are not currently in the group:</p>";
                    echo "<p><em>" . $grp_name . "</em></p>";
                } else if ($req_status == "member-removed") {
                    echo "<p id='remark'>You will no longer receive messages for the group:</p>";
                    echo "<p><em>" . $grp_name . "</em></p>";   
                } else {
                    echo "<p id='remark'>You are the group leader and may not unsubscribe from the group:</p>";
                    echo "<p><em>" . $grp_name . "</em></p>";
                }
            ?>
            <br>
            <div style="text-align:center;">
            <input type="button" id="ok" name="ok" class='ui-button ui-widget ui-state-default ui-corner-all' value="Unsubscribe">
            <input type="button" id="close"  name="close"  class='ui-button ui-widget ui-state-default ui-corner-all' value="Cancel" onclick="window.open('', '_self', ''); window.close();">
            </div>
        </div>
    </div>
</BODY>
</HTML>


$（文档）.ready（函数（）{
$（'input[type=button]'）。悬停（函数（）{
$（this.toggleClass（'ui-state-hover'）；
});
//将php变量转换为本地变量
var req_状态=“”；
变量成员id=“”；
var group_id=“”；
如果（请求状态=='成员为grp ldr'）{
$（“#ok”）.prop（'value'，'Unsubscribe'）；
$（'ok'）.prop（'disabled'，true）；
$（'#ok'）.addClass（'ui-state-disabled'）；
}else if（请求状态=='成员不在组'）{
$（“#ok”）.prop（'value'，'Resubscribe'）；
$（'ok'）.prop（'disabled'，false）；
}否则如果（请求状态=='成员已删除'）{
$（“#ok”）.prop（'value'，'Resubscribe'）；
$（'ok'）.prop（'disabled'，false）；
$（“#关闭”）.prop（'value'，'close'）；
}否则{
$（“#ok”）.prop（'value'，'Unsubscribe'）；
$（'#ok'）.prop（“禁用”，false）；
}
$（'#ok'）。在（'click'，函数（e）{
e、 预防默认值（）；
if（$（'#ok'）.val（）=“取消订阅”）{
$.post（'./ajax\u group\u unsubscribe.php'，{function:'unsubscribe'，member\u id:member\u id，group\u id:group\u id}，函数（状态）{
如果（状态='true'）{
$（“#ok”）.prop（'value'，'Resubscribe'）；
$（'ok'）.prop（'disabled'，false）；
$（'#ok'）.removeClass（'ui-state-disabled'）；
$（“#关闭”）.prop（'value'，'close'）；
document.getElementById（'remark'）.innerHTML=“您已从组中删除：”；
};
});
}else if（$（'#ok'）.val（）=“重新订阅”）{
$.post（'./ajax\u group\u unsubscribe.php'，{function:'subscribe'，member\u id:member\u id，group\u id:group\u id}，function（status）{
如果（状态='true'）{
$（“#ok”）.prop（'value'，'Unsubscribe'）；
$（'ok'）.prop（'disabled'，false）；
$（'#ok'）.removeClass（'ui-state-disabled'）；
$（“#关闭”）.prop（'value'，'close'）；
document.getElementById（'remark'）.innerHTML=“您已添加到组：”；
};
});
}
});
});
组取消订阅请求
您应该使用
而不是
。

单击输入被解释为提交。
您在
else
语句中使用了单个
=
，并且内部
if
语句中缺少右大括号


$('#ok').on('click', function() { 
    if ($('#ok').value == "Unsubscribe") {
        $.post('./ajax_group_unsubscribe.php', {function:'unsubscribe', member_id:member_id, group_id:group_id}, function(status) {
            if (status = 'true') {
                $("#ok").prop('value', 'Resubscribe'); 
                $('#ok').prop('disabled',false);
                $('#ok').removeClass('ui-state-disabled');
                $("#close").prop('value', 'Close'); 
                document.getElementById('remark').innerHTML = "You have been removed from the group:";
            }             
        });
    } else if ($('#ok').value == "Resubscribe") {
        $.post('./ajax_group_unsubscribe.php', {function:'subscribe', member_id:member_id, group_id:group_id }, function(status) {                  
            if (status = 'true') {
                $("#ok").prop('value', 'Unsubscribe'); 
                $('#ok').prop('disabled',false);
                $('#ok').removeClass('ui-state-disabled');
                $("#close").prop('value', 'Close');
                document.getElementById('remark').innerHTML = "You have been added to the group:";
            }    
        });
    }
});



尝试移除窗口。打开…取出窗口。打开，但无法更正。这本不应该是问题所在，因为“关闭”按钮会导致window.open命令关闭窗口。@Tim我在没有
窗口的情况下测试了您的代码。打开
，它不会重新加载页面。代码中唯一可疑的地方是：
单击按钮会显示：打开一个新窗口，然后关闭self。我在测试时收到一条错误消息，但我不知道你的浏览器是什么。在这两种情况下它都重新加载了吗？这并没有纠正问题（仍然刷新），也破坏了按钮（标签不见了）。我确实让所有按钮标签正常工作，但页面仍然重新加载了所有可能导致问题的代码？它不会刷新我的页面。您的ajax\u group\u unsubscribe.php代码是什么？关于ajax代码的好问题。它接受通过执行$\u POST传入的值，然后更新数据库并向调用者返回状态。它对UI没有任何作用。删除帖子，窗口不会刷新。那么，为什么这篇文章会引起更新呢？谢谢你指出这一点。我确实纠正了这一点，但这不是重新加载页面的原因。由于页面重新加载，最初传入的值将被清除。我意识到我可以将这些值存储在php变量中，并在重新加载时进行测试。但是想知道为什么会发生重新加载。@Tim您还忘了关闭您的
if
语句。为什么您认为if语句没有关闭？chrome调试器没有显示任何问题。@Tim我的机器上显示了问题，打开控制台选项卡并比较我的代码和你的代码，很明显if语句没有关闭。Julekgwa，我道歉。关于我发布的代码，你是对的。为了缩短帖子中的代码，我删除了一个else块。我仔细检查了实际代码，结果是正确的。我被这个问题所困扰，因为我没有尝试过停止重新加载。

$('#ok').on('click', function() { 
    if ($('#ok').value == "Unsubscribe") {
        $.post('./ajax_group_unsubscribe.php', {function:'unsubscribe', member_id:member_id, group_id:group_id}, function(status) {
            if (status = 'true') {
                $("#ok").prop('value', 'Resubscribe'); 
                $('#ok').prop('disabled',false);
                $('#ok').removeClass('ui-state-disabled');
                $("#close").prop('value', 'Close'); 
                document.getElementById('remark').innerHTML = "You have been removed from the group:";
            }             
        });
    } else if ($('#ok').value == "Resubscribe") {
        $.post('./ajax_group_unsubscribe.php', {function:'subscribe', member_id:member_id, group_id:group_id }, function(status) {                  
            if (status = 'true') {
                $("#ok").prop('value', 'Unsubscribe'); 
                $('#ok').prop('disabled',false);
                $('#ok').removeClass('ui-state-disabled');
                $("#close").prop('value', 'Close');
                document.getElementById('remark').innerHTML = "You have been added to the group:";
            }    
        });
    }
});