使用 javascript 和 jquery 更改 url答案

【问题标题】：Changing url using javascript and jquery使用 javascript 和 jquery 更改 url
【发布时间】：2016-10-03 22:53:20
【问题描述】：

你好

我正在开发一个通过 ajax 加载文件的 jQuery 插件。当用户点击一个按钮时：

<button class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>

当用户点击按钮时，它会生成以下网址：

http://localhost//plugins/ajaxLoad/index.html#ajax/Login

我想改成

http://localhost//plugins/ajaxLoad/index.html/ajax/Login

我的 javascript 是：

(function ($) {
$.fn.ajaxLoad = function (options) {
    var settings = $.extend({
        fileUrl : 'null',
        loadOn : '.em'

    }, options);
    $('[data-load="ajax"]').each(function(index, el) {
        $(this).click(function () {
            var file = $(this).attr('data-file');
            var loadOn = $(this).attr('data-load-on');
            var permission = $(this).attr("data-ask-permission");
            settings.fileUrl = file;
            settings.loadOn = loadOn;
            if (permission == 'yes') {
                var ask = confirm("Do you want to load file");
                if (ask == true) {
                    $.fn.loadFile();
                }
            }else {
                $.fn.loadFile();
            }
        });
    });
    $.fn.loadFile = function () {
        // setting location;
        var a = settings.fileUrl.split(".");
        location.hash = a[0];
        $.post(settings.fileUrl, function(response) {
            $(settings.loadOn).html(response);
        });
    }
}
}(jQuery))

谁能告诉我如何在 jquery 和 Javascript 中更改 url。

【问题讨论】：

当我使用 location.hash 功能时

标签： javascript jquery url hash

【解决方案1】：

您需要使用 history.pushstate() 来执行此操作。

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

查看 MDN 上的这篇文章了解更多详情 https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

这篇文章提供了一些不错的 jQuery 示例。 https://rosspenman.com/pushstate-jquery

【讨论】：

如何删除我使用推送状态写入的数据。
不确定我是否听懂了您的问题，这只是更改了 URL，同时使您保持在同一页面上。
让我有一个网址 wapgee.com/index.php 我现在把它改成了 wapgee.com/index.php/game/12我想将其更改为默认 wapgee.com/index.php。我如何使用推送状态来实现这一点
history.pushState({},'','index.php');
pushState的第二个参数是什么。

【解决方案2】：

为按钮添加了另一个属性标题

<button data-title="login" class='btn btn-info' data-load="ajax" data-file="ajax/login.html" >Login</button>

在 Js 中（在 $(this).click 行之后）：

var title = $(this).attr('data-title');
settings.title = title

只需替换

location.hash = a[0];

有

history.pushState('','',"?"+settings.title);

【讨论】：

【解决方案3】：

改变

location.hash = a[0];

到：

location.pathname += '/' + a[0];

【讨论】：

它可以工作，但页面会重定向，并显示 404 NOT FOUND 错误消息。
如果您想在不实际重定向的情况下更改 URL，您可能需要使用 History API，如@DavidBradshaw 的回答。
是的，DavidBradshaw 的回答帮助了我

【解决方案4】：

只需使用 .replace() 将哈希替换为空白即可

例子。

settings.fileUrl.replace('.' , ' ');

Updated above also

更新：

不要散列网址

例子：

 $.fn.loadFile = function () {
        // setting location;
        var a = settings.fileUrl.replace("." , "/");
        location.href = a;
        $.post(settings.fileUrl, function(response) {
            $(settings.loadOn).html(response);
        });
    }
}

【讨论】：

settings.fileURL 中没有 #。哈希来自分配给location.hash。