时间戳

首页 > 解决方案 > 使用 AJAX 请求的用户输入查询不会更新 history.pushState，如果不重新加载页面就无法解析

javascript - 使用 AJAX 请求的用户输入查询不会更新 history.pushState，如果不重新加载页面就无法解析

问题描述

设想：

用户开始202在输入文本字段中输入内容，AJAX 请求?keyword=202作为 URL 的一部分发送。内容更新成功。用户将更新关键字添加到2020，仍然发送另一个 AJAX 请求，但仍?keyword=202作为 URL 的一部分。

如果用户重新加载，尝试调整搜索2020，他们将面临与上述基本相同的问题。第一次尝试有效，任何后续尝试“失败”。

如果我window.history.pushState从我的函数中删除 ，userString我发送给 的console.log()似乎会使用输入进行更新，但是在尝试更新时window.history.pushState，它会将其视为 URL 似乎与第一个也是唯一成功的请求相同。

下面是我正在尝试做的一个例子。

$(document).on('keyup', $keywordSearchInput, function() {
    const userSearchStr = $keywordSearchInput.val().toString();

    if(userSearchStr.length >= 3) {

      if('URLSearchParams' in window) {
        const searchParams = new URLSearchParams(window.location.search)
        searchParams.set('keyword', userSearchStr);
        const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();

        updateDynamicView(newRelativePathQuery, '')
      }

    }

  });

function updateDynamicView(userQuery, userString) {
  console.log(userQuery, userString);

  window.history.pushState(null, null, userQuery);

  $('.loading').addClass('js-active');
  $('#dynamic-view-content').hide();

  $('#dynamic-view').load(`${userQuery} #dynamic-view`, function() {
    $('.loading').removeClass('js-active');
    $('#dynamic-view-content').show();
  });
}

标签： javascriptjqueryajaxhtml5-history

解决方案

推荐阅读