Question

假设我的页面中有一个简单的表单，如下所示：

<form action="/properties/search" method="GET" id="form_search">
  <p>
    <label for="price">Min price:</label>
    <input type="text" name="min_price" id="min_price">
  </p>
  <p>
    <label for="price">Max price:</label>
    <input type="text" name="max_price" id="max_price">
  </p>
  <p>
    <input type="submit">
  </p>
</form>

当我提交表单时，我有以下网址：

http://.../properties/search?min_price=100000&max_price=200000

我想更改此网址：

http://.../properties/search?price=100000,200000

要做到这一点，我正在使用JQuery和JQuery querystring plugin：

$(document).ready(function() {
    $("#form_search").submit(function() {
        var querystring = rewrite_interval_qstring();
        // querystring equals "?price=100000,200000" -> exactly what I want !

        // ???
    });
});

如何更改（评论“???”）提交网址？我已单独测试了以下说明，但它不起作用。

window.location = querystring;
window.location.href = querystring;
window.location.search = querystring;

Answer 1

你快到了。截取提交事件（正如您所做），提取最小值和最大值，构建您的URL并设置window.location.href

$(document).ready(function() {
    $("#form_search").submit(function(event) {
        event.preventDefault();
        $this = $(this);
        // var url = rewrite_interval_qstring();
        var min_price = $('#min_price').val();
        var max_price = $('#max_price').val();
        var url = $this.attr('action') + '?price=' + min_price + ',' + max_price;
        window.location.href = url;
    });
});

Answer 2

您需要阻止发生默认提交操作

$(document).ready(function() {
    $("#form_search").submit(function(event) {
        event.preventDefault(); // <-- add this
        var querystring = rewrite_interval_qstring();
        // querystring equals "?price=100000,200000" -> exactly what I want !

        window.location.href = querystring; // <-- this should work.
    });
});

Answer 3

Rob Cowie的回答是一种方法。另一个是添加名为“price”的隐藏字段，并在使用您想要的值提交之前填写它。

当我使用JQuery提交我的GET表单时如何更改查询字符串？

3 个答案: