如何更改提交表单的查询字符串

Posted 2021-05-03

我有一个包含许多下拉列表的表单，我希望在提交表单时排除在查询字符串中出现的未选择的表单。所以我可以使用一些模块或过滤器来改变这种行为。

例如：当我搜索测试时，url将是/ someaction？q = test＆select1 =＆select2 =所需的url是：/ someaction？q = test

<form action="/search" action="Get">
        <label>Search term <input name="q"></label>

<select id="select1" name="select1">
<option value="1">option 1</option>
</select>

<select id="select2" name="select2">
<option value="1">option 1</option>
</select>


        <input type="submit">
    </form>

答案

由于您正在使用GET方法进行表单操作，因此您可以使用replace()函数和正则表达式处理提交事件以防止正常提交和删除空值，然后使用location.href重定向到目标URL：

$('form').submit(function (e) {
    e.preventDefault(); 

    var queryString = $(this).serialize().replace(/&?[w-d_]+=&|&?[w-d_]+=$/gi, "");
    url = this.getAttribute('action') + (queryString.length > 0 ? "?" + queryString : "");

    // returns URL /search?q=something when both select elements are empty 
    location.href = url;
});

或者使用select或attr()禁用prop()元素而不使用值，以防止它们在查询字符串中使用，使用普通表单提交事件：

$('form').submit(function () {
    $('select').each(function () {
        if ($(this).val() == '') {
            $(this).prop('disabled', 'disabled'); // or prop('disabled', true)
    });
});