Question

我正在为网站做一个用户脚本，并希望在其上添加一些按钮，从中打开类别。他们有带下拉菜单的搜索框，您应该在其中选择类别并单击搜索按钮，然后您将导航到该类别。

所以我想添加带有这些类别的3,4个按钮，每个按钮都包含指向每个类别的链接。但是，当你点击url中的任何按钮时，添加“？”，这在第一页是正常的，但是当你有分页并点击第二页时这个？打破网址，不要导航到第二页。

示例：

http://example.com/torrents/type:pc-iso/

而不是

 http://example.com/torrents/type:pc-iso/?

当点击按钮导航我进入没有问号的正确网址时，有更好的方法吗？

这是我的代码：

$(this).append(
        "<br />" + "<br />" + "<br />" +
        "<form id=\"beBossButtons\">" +
        "<table><tr>" +
        "<td><button id=\"all-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> All</button></td>" +
        "<td><button id=\"pc-iso-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Software PC-ISO</button></td>" +
        "<td><button id=\"documentaries-btn\" class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Documentaries</button></td>" +
        "</tr></form>");
});

$('#all-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/";
    form.submit();
});

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:pc-iso/";
    form.submit();
});

$('#documentaries-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:documentaries/";
    form.submit();
});

Answer 1

好吧，我已经准备好发帖了解这是怎么做的。

首先添加方法帖子到表单

$('.col-md-6 .form-group.mb0').each(function () {
    $(this).append(
        "<br />" + "<br />" + "<br />" +
        "<form id=\"beBossButtons\" method=\"post\">" +
        "<table><tr>" +
        "<td><button id=\"all-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> All</button></td>" +
        "<td><button id=\"pc-iso-btn\"  class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Software PC-ISO</button></td>" +
        "<td><button id=\"documentaries-btn\" class=\"btn btn-sm btn-green4\"><i class=\"fa fa-search\"></i> Documentaries</button></td>" +
        "</tr></form>");
});

我看到了他们如何发送搜索表单及其属性并将其复制（类型：类别）。将此属性添加到我的表单中。用“搜索”而不是网址更改了操作，因此我正在使用他们的搜索表单。

旧jQuery：

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    form.action = "/torrents/type:pc-iso/";
    form.submit();
});

新的和工作的：

$('#pc-iso-btn').click(function () {
    var form = document.getElementById("beBossButtons");
    var input = $("<input>")
        .attr("type", "hidden")
        .attr("name", "type").val("pc-iso");
    $('#beBossButtons').append($(input));
    form.action = "search";
    form.submit();
});

就是这样。谢谢你的帮助。

Answer 2

您可以更好地使用与ajax请求相关联的链接列表

<a href="http://example.com/torrents/type:pc-iso/" class="button">Category 1</a>
<a href="http://example.com/torrents/type:mac-os/" class="button">Category 2</a>

<script>
$("a.button").click(function(){
    $.ajax({
        url: $(this).attr('href'),
        type: "GET",
        success: function(data){

            // Load your categories data on success

        }
    });
});
</script>

单击任一类别会加载所需内容。使用表单将您的数据发布到GET请求似乎有点过分

在网址中使用jquery发送没有问号的表单

2 个答案: