Question

我有以下两种形式：

<form id='EnableBackgroundCrossfadeForm' action='BgCFenable.php' method='post'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable'>
</form>

和

<form id='DisableBackgroundCrossfadeForm' action='BgCFdisable.php' method='post'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部POST.js文件：

$("#BgCFdisable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#DisableBackgroundCrossfadeForm").attr("action"),
               $("#DisableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "DISABLED"){
                        $("#BgCFLog").html("Background Crossfading disabled!");
                        $( "#BgCFdisable" ).attr("disabled", "disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).removeAttr("disabled");
                        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
                    }
               });
    $("#DisableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

$("#BgCFenable").click(function(){

    $("#BgCFLog").animate({"max-height":"100px"}, 300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.post($("#EnableBackgroundCrossfadeForm").attr("action"),
               $("#EnableBackgroundCrossfadeForm").serializeArray(),
               function(data){
                    if(data == "ENABLED"){
                        $("#BgCFLog").html("Background Crossfading enabled!");
                        $( "#BgCFdisable" ).removeAttr("disabled");
                        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
                        $( "#BgCFenable" ).attr("disabled", "disabled");
                        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
                    }
               });
    $("#EnableBackgroundCrossfadeForm").submit(function(){
        return false;
    });
});

主要的想法是，如果我将脚本放在<script></script>文件末尾INDEX.php文件（我有表格）的body标记之间，那么这项工作就完美了。换句话说，只有当jQuery脚本是“内部”而不是从外部*.js文件加载时，这才有效。

如果是从外部加载的，提交表单会将我重定向到BgCFenable.php/BgCFdisable.php，而不是保留在INDEX.php页面上，我需要显示结果数据。

如何让这项工作在外部加载脚本而无需在提交时重定向？

Answer 1

我最终想通了。这些是形式：

<form id='EnableBackgroundCrossfadeForm' onsubmit='return EnableBGCF();'>
    <input id='BgCFenable' class='DisableD_Button' type='submit' value='Enable' disabled='disabled'>
</form>

和

<form id='DisableBackgroundCrossfadeForm' onsubmit='return DisableBGCF();'>
    <input id='BgCFdisable' class='DisableButton' type='submit' value='Disable'>
</form>

这是外部的.js文件：

function EnableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFenable.php', data:$('#EnableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #c9e52d'>enabled!</span>");
        $( "#BgCFdisable" ).removeAttr("disabled");
        $( "#BgCFdisable" ).switchClass( "DisableD_Button", "DisableButton", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).attr("disabled","disabled");
        $( "#BgCFenable" ).switchClass( "EnableButton", "DisableD_Button", 1000, "easeInOutQuad" );
    }});

    return false;
}

function DisableBGCF() {
    $("#BgCFLog").animate({"max-height":"100px"},300);
    $("#BgCFLog").html("<img src='Resources/Images/Loader02.gif'/>");

    $.ajax({type:'POST', url: 'BgCFdisable.php', data:$('#DisableBackgroundCrossfadeForm').serialize(), success: function(response) {
        $('#BgCFLog').html("Background Crossfading <span style='color: #e52d58'>disabled!</span>");
        $( "#BgCFdisable" ).attr("disabled","disabled");
        $( "#BgCFdisable" ).switchClass( "DisableButton", "DisableD_Button", 1000, "easeInOutQuad" );
        $( "#BgCFenable" ).removeAttr("disabled");
        $( "#BgCFenable" ).switchClass( "DisableD_Button", "EnableButton", 1000, "easeInOutQuad" );
    }});

    return false;
}

现在它正在运作。无论如何，谢谢你的帮助！

Answer 2

您需要传递点击事件并防止默认，以便表单不提交..

所以，在：

$("#BgCFdisable").click(function(){...

你需要这样做：

$("#BgCFdisable").click(function(e){
    e.preventDefault();...

同样，在：

$("#BgCFenable").click(function(){...

你需要这样做：

$("#BgCFenable").click(function(e){
    e.preventDefault();...

当从外部源加载脚本时，“return false”对于jQuery post表单提交不起作用

2 个答案: