Javascript Django jquery ajax

我目前面临的情况可能很复杂，我会花时间尽可能清楚地解释我的问题

我使用django v1.8

我有一个显示结果列表的视图，以及专用于该视图的模板，我添加了ajax方法来快速过滤当前结果。 一切正常，但只有当页面手动刷新时，ajax才被清除，我知道这是正常的，我想做的是更改浏览器的URL

my file.js：

$(function(){
    $('#filter').change(function() {
                $.ajax({
                        type: "POST",
                        url: "/find/object/filter/",
                        data: {
                                'preference': $('#preference').val(),
                                'city': $('#hsearch').val(),
                                'spec': $('#mplspecialite').val(),
                                'mplace': $('#mplace').val(),
                                'filter': $('#filter').val(),
                                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                        },
                        success: searchResult,
                        dataType: 'html'
                });
    });
});

function searchResult(data, textStatus, jqXHR)
{
    $('#dynamic-results').html(data);
}

Ajax view.py：

def ajax_something_search(request):
    args = {}

    if request.method != "POST":
        raise Http404(request.method, _("Not allow method !"))

    # code
    # code
    # code
    val_url = urllib.parse.urlencode(args)
    url = reverse(
        'manage-core:core-search') + '?' + val_url
    return HttpResponseRedirect(url)

我的搜索

view.py

（我在这个视图中重定向我的所有ajax参数）：

---

调用ajax时如何更新浏览器url？

可以通过使用

history.replaceState

编辑历史记录条目，以编程方式更改浏览器url。它实际上与

history.pushState

相同，只是

pushState

添加了一个浏览器历史记录条目，而

replaceState

修改了当前条目。我将继续执行

pushState

作为一个警告，如果不是绝对需要的话，你会让自己变得更加复杂。这是因为如果有人在历史中向后导航，您必须实现修改页面的行为

历史记录

位于DOM

窗口

对象下

history.pushState(someState, "some title", "page.html");

someState

是与该浏览器历史记录条目关联的对象。 e、 g.

{城市：“伦敦”，伦敦：51.5072，拉脱维亚：0.1275}

第一个参数（

someState

）随后在历史记录更改时触发

popstate

事件时提供。另一个警告是，重新加载浏览器时，您不应依赖

popstate

事件，因为它可能会或可能不会触发，具体取决于浏览器。从

history.state

获取状态对象，而不依赖于正在触发的事件

中间的参数可以是空字符串，也可以是您选择的字符串，浏览器暂时忽略它

最后一个参数是要推送到浏览器历史记录中的URL，它可以是绝对的，也可以是相对的。浏览器不会加载它

更具体地说： 您可以在AJAX请求的成功回调中使用

pushState

，它将请求中发送的数据推送到历史记录条目中。当用户导航回页面或重新加载页面时，可以将这些数据拉回并用于再次发送AJAX请求

如果您预计您将要做更多的工作，那么您可能需要查看浏览器中的路由库

祝你好运

你可以阅读更多关于

编辑：回复评论

<!-- language: lang-js -->
$(function(){
  $('#filter').change(function() {

    var relQuery = null;

    // The stuff you send in your request
    var reqData = {
      'preference': $('#preference').val(),
      'city': $('#hsearch').val(),
      'spec': $('#mplspecialite').val(),
      'mplace': $('#mplace').val(),
      'filter': $('#filter').val(),
      'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
    };

    // Make the query string that you need. 
    // Probably looks like some variant of this.
    // Look at jQuery.param docs.
    relQuery = "?" + $.param( reqData );

    // The request
    $.ajax({
      type: "POST",
      url: "/find/object/filter/",
      data: reqData,
      success: searchResult,
      dataType: 'html'
    });

    // Change the current history entry to have that
    // URL query string.
    history.replaceState( {}, '',  relQuery);

  });
});

function searchResult(data, textStatus, jqXHR) {
    $('#dynamic-results').html(data);

}

$（函数（）{
$（'#过滤器'）。更改（函数（）{
var relQuery=null；
//你在请求中发送的内容
var reqData={
“首选项”：$（“#首选项”）.val（），
“城市”：$（“#hsearch”）.val（），
'spec'：$（'mplspecialite'）.val（），
“mplace”：$（“#mplace”）.val（），
'过滤器'：$（'#过滤器'）.val（），
'csrfmiddlewaretoken'：$（“输入[name=csrfmiddlewaretoken]”）。val（）
};
//生成所需的查询字符串。
//可能看起来像是这个的变体。
//查看jQuery.param文档。
relQuery=“？”+$.param（reqData）；
//请求
$.ajax({
类型：“POST”，
url:“/find/object/filter/”，
数据：reqData，
成功：搜索结果，
数据类型：“html”
});
//将当前历史记录条目更改为
//URL查询字符串。
replaceState（{}，，，relQuery）；
});
});
函数搜索结果（数据、文本状态、jqXHR）{
$（“#动态结果”）.html（数据）；
}

Minn，谢谢！但是你看！当用户选择带有html选择标记的过滤器时，ajax过滤器上下文结果页面都能正常工作！但当他用F5或其他工具刷新页面时，ajax过滤器就会消失，这就是我的问题！我想用给定的firebug控制台日志更新url浏览器（firebug向我显示要替换的正确url），如果此url更改用户可以刷新页面！如何做到这一点？创建一个表示过滤器状态的对象，并使用该状态推送一个新的历史记录条目。在页面加载时，您应该检查与该条目关联的历史状态。如果存在，使用该对象的内容重新应用过滤器。哼！也许我理解你！看（上次请我解决我的问题）！当用户进行搜索时，其url将显示在浏览器上（）确定！现在，当用户检查此页面中的SelectHTML标记时，所有工作都正常！firebug向我显示我要替换到的url（GET:这是在ajax事件调用后我要在浏览器中获取的url！好的，我想我现在明白你想要什么了。更简单地说，在ajax请求的成功回调中，使用

history.replaceState（{}，“，queryParam）

where

queryParam

是你的相对URL字符串，看起来像这样的

？filter\u name=value&filter\u name=value

。好的！看看我发布的问题中的my file.js！我如何使用它？queryParam在哪里，我可以在哪里获取历史？你能用我的file.js修改它吗？请我的朋友！

<!-- language: lang-js -->
$(function(){
  $('#filter').change(function() {

    var relQuery = null;

    // The stuff you send in your request
    var reqData = {
      'preference': $('#preference').val(),
      'city': $('#hsearch').val(),
      'spec': $('#mplspecialite').val(),
      'mplace': $('#mplace').val(),
      'filter': $('#filter').val(),
      'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
    };

    // Make the query string that you need. 
    // Probably looks like some variant of this.
    // Look at jQuery.param docs.
    relQuery = "?" + $.param( reqData );

    // The request
    $.ajax({
      type: "POST",
      url: "/find/object/filter/",
      data: reqData,
      success: searchResult,
      dataType: 'html'
    });

    // Change the current history entry to have that
    // URL query string.
    history.replaceState( {}, '',  relQuery);

  });
});

function searchResult(data, textStatus, jqXHR) {
    $('#dynamic-results').html(data);

}