如何使用 Ajax 根据网页内容生成 URL？

问：

我正在尝试构建将出现在电子商务网站的每个产品页面上的切换按钮。这些按钮将在与每个产品的“男士”和“女士”版本相关的页面之间来回切换。

$(function() {
    if ( document.location.href.indexOf('womens') > -1 ) {
        $('a.gender-toggle-women').attr("href", $(location).attr('href'));
        $('a.gender-toggle-men').attr("href", $(location).attr('href').replace('womens','mens'));
    }
   else {
  $('a.gender-toggle-men').attr("href", $(location).attr('href'));
  $('a.gender-toggle-women').attr("href", $(location).attr('href').replace('mens','womens'));
   }
});

我想使用上面这样的脚本在用户单击切换按钮时将用户重定向到新页面，但它不起作用，因为 url 路径略有不同。

例：

/shop/womens-running-shoe-sku1？variationId=333

与

/shop/mens-running-shoe-sku2？variationId=444

因此，我想使用 Ajax（或 Fetch？）根据产品页面上列出的产品标题生成 URL。

如果我这样做

var product = $("h1.product-content-info-name.product-info-js").attr("data-catentry-name-dl");

var prodTransform = product.split(" ").join("-").toLowerCase().replace(/'/g, '');

并将“Men's Running Shoe”转换为“mens-running-shoe”以使其与页面url的格式匹配，我可以使用Ajax（或Fetch？）返回整个关联的url或html文件路径吗？

我知道这似乎是一种奇怪的迂回方式，但我是通过 a/b 测试平台创建此切换开关的，所以我无法直接访问网站的后端，我必须做所有事情客户端。我也不想浪费时间为每个产品页面创建不同版本的 a/b 测试，并且必须手动输入每个页面的 url。

总的来说，我对开发和编码也很陌生，我主要是通过反复试验来学习的。因此，如果我似乎遗漏了一些相当明显的东西，请告诉我。

我一直在到处寻找资源来帮助我做我想做的事情，但我找不到任何超级有用的东西。