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

Posted

技术标签:

【中文标题】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

以上是关于Ajax 在按钮提交上更改链接的类名的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 和防止双重“提交”

使用 PHP+jQuery AJAX 检查 MySQL 数据库的更改并加载更改?

Web页面向后台提交数据的方式和选择

使用javascript发送请求时中止链接和表单提交

如何使用 php 和 HTML 更改活动链接的类名

怎么提取网页中的按钮链接。 一个投票界面,很多选项按钮。怎么能把其中一个按钮单独提出作为网址链接?