Ajax 在按钮提交上更改链接的类名

Posted 2023-03-16

【中文标题】Ajax 在按钮提交上更改链接的类名

【英文标题】：Ajax Change class name of a link upon button submit

【发布时间】：2014-01-07 17:22:08

【问题描述】：

我有四个菜单选项卡。其中一个选项卡是提交表单（默认），第二个选项卡包含条目列表，每个条目都有一个名为更改状态的按钮。当我单击“更改状态”时，我使用 ajax 调用 windows.reload 来更新页面而不刷新，但选项卡将返回到默认选项卡，即第一个选项卡。现在我的问题是如何将 menutab 类更新为当前选定的菜单以成为活动菜单。下面是我的ajax代码：

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function()  
    $(".closeBTN").click(function() 

    var data = $(this).attr('id');
    //alert (data);
    $.ajax( 
        type: "POST",
        url: "../deals_status_update.php",
        data:  'id': data 
    ).done(function(msg) 
        $("#notification").html(msg);           
        window.setTimeout(function()
            location.reload()

            $('#itrade .active').removeClass().addClass('nonactive');
            $('#iopendeals .nonactive').removeClass().addClass('active');
        ,100)          
    );
);
);        
</script>

【问题讨论】：

location.reload() 和实际刷新不一样吗？如果是这样，那么您只想捕获从 ajax 调用返回的任何内容，并操作您的 DOM 结构以显示您想要的页面。 -- 编辑：location.reload() 确实像 F5 一样刷新了整个页面：developer.mozilla.org/en-US/docs/Web/API/Location.reload

【参考方案1】：

location.reload() 会重新加载网站，所以之后你就不能使用 jQuery 方法了。

也许window.location.hash可以帮助你。

添加哈希并在网站重新加载后解析此哈希以触发您的类？

【参考方案2】：

尝试使用 location.hash，因为解释 location.reload() 实际上会刷新页面，但我仍然不明白为什么需要刷新页面来更新数据！

<input type="button" value="change status"> // a button to click to change status

<a class="active">tab1</a> // need to change classname when the button clicked
<a class="nonactive">tab2</a> // need to change classname when the button clicked

<script>
$(document).ready(function()  
    $(".closeBTN").click(function()     
        var data = $(this).attr('id');

        $.ajax( 
            type: "POST",
            url: "../deals_status_update.php",
            data:  'id': data 
        ).done(function(msg) 
            $("#notification").html(msg);           
            window.setTimeout(function()
                location.hash = 'iopendeals';
                location.reload();
            ,100)          
        );
    );

    if(location.hash != '') 
        $('.active').removeClass().addClass('nonactive');
        $(location.hash + ' .nonactive').removeClass().addClass('active');
    
);        
</script>

【参考方案3】：

您正在重新加载页面，因此稍后发生的任何 javascript 都将失去其状态。 DOM 修改仅适用于当前页面会话。一旦导航离开或重新加载，它们就会失去进度。

您是否考虑过不重新加载？你为什么要重新加载？

或者，

您是否可以在客户端进行这些更改，而不是重新加载，而是使用不同的 GET 参数重定向到同一页面？

<li class="menuitem<?=$_GET['page'] == 'homepage' ? ' active' : ''?>">
    Homepage
</li>

【讨论】：

如果我不使用重新加载页面，它需要手动刷新页面以更新数据。

您已经在使用 POST 和 AJAX，为什么不同时使用 GET 并动态获取数据？

嗨陈，我为 GET 函数尝试了这段代码没有任何反应：

下次把你的代码放到jsfiddle里。你也在使用 jQuery，为什么要自己创建 XHR 请求？在您的 done() 回调中，只需添加类似以下内容：jsfiddle