Ajax 调用后 url 中的 data-id 没有改变

Posted

技术标签:

【中文标题】Ajax 调用后 url 中的 data-id 没有改变【英文标题】:After Ajax call data-id in the url doesn't change 【发布时间】:2016-11-09 22:56:21 【问题描述】:

我正在输出多个使用相同<a> 的动态链接。我的 AJAX 调用可以很好地加载所有链接的内容,但 URL 始终显示第一个链接的 id。当点击不同的链接时,如何让它更改 url 中的 id?

$string .= '<a class="hrefid" data-id="'.$name["id"].'" href="#link">'.$name["name"].'</a>'.
<div id="content"></div>
$('.hrefid').on('click', function (e) 
    var load = $(e.target).attr("href");
    if(load == "#link") 
        $.ajax(
            type: 'post',
            url: "/page/test/"+$(this).parents("[data-id]").attr("data-id"),
            complete: function (event) 
                $("#content").contents().remove();
                $("#content").append(event.responseText);
                history.replaceState(, "", "link"+$('[data-id]').first().attr('data-id'));

            
        );
    
);

【问题讨论】:

问题可能是你使用history.replaceState:***.com/questions/12832317/… 【参考方案1】:

这里是解决方案...

$('.hrefid').on('click', function (e) 
var $this = $(this);
var load = $(e.target).attr("href");
if(load == "#link") 
    $.ajax(
        type: 'post',
        url: "/page/test/"+id,
        complete: function (event) 
            $("#content").contents().remove();
            $("#content").append(event.responseText);
            history.replaceState(, "", "link" + $this.attr('data-id'));
        
    );

);

【讨论】:

【参考方案2】:

您必须将 id 值传递给 jquery。将值传递给 jquery 后,您需要告诉 url 将传输数据的文件。

$('.hrefid').on('click', function (e) 
    var load = $(e.target).attr("href");
    var id = $('#your input id').val();
    if(load == "#link") 
        $.ajax(
            type: 'post',
            url: "/page/test.php?action=update&id="+id,
            complete: function (event) 
                $("#content").contents().remove();
                $("#content").append(event.responseText);
                history.replaceState(, "", "link"+$('[data-id]').first().attr('data-id'));

            
        );
    
);

关于 test.php

if($_GET[action] == "update")
     $id = $_GET['id'];
     echo $id;

【讨论】:

【参考方案3】:

我认为,您不能以编程方式更改地址栏中的 url 链接,因为这违反了安全规则。 想象一下,你打开一个糟糕的网站,它显示的页面与你最喜欢的银行页面完全相同,用于账户操作,而且地址栏中的 url 链接与银行的相同......所以你不会怀疑这不是真正的银行页。您在此页面上的操作可能会导致将您的凭据交给坏人。

您可以通过编程方式更改 url 链接的哈希部分。 这里是关于hash fragment of url的wiki

【讨论】:

以上是关于Ajax 调用后 url 中的 data-id 没有改变的主要内容,如果未能解决你的问题,请参考以下文章

jquery 中的对象,在ajax 回传后,不能正常调用的解决办法

AJAX 调用中的 ERR_EMPTY_RESPONSE 随机时间

IFRAME 中的 AJAX 调用

ajax 删除/修改单条数据

Facebook 中的 URL 更改 ajax 调用

无法在 ajax 调用中访问 Url.Action 中的项目