Используйте кнопку «Назад» с формой AJAX?

Привет,Используйте кнопку «Назад» с формой AJAX?

У меня есть страница ASP.NET MVC, содержащий 5 каскадные выпадающие (Недоступен до загружен). Когда первый установлен, AJAX будет извлекать данные для второго раскрывающегося списка (динамический html).

Если мы перейдем к следующей странице, а затем нажмите кнопку «назад» в браузере, будет показано и будет установлено только первое каскадное выпадающее меню, даже если мы установили все 5?

Примечание. Установив правильную последовательность запросов, служба может установить форму так же, как если бы использовался Ajax, но с помощью кнопки возврата никогда не проецируется сервис.

Отвод Advice

источник

2011-01-21 Banshee

Что вам нужно HTML 5 История API. Вы можете прочитать об этом во многих местах, например here.

Вот простой пример, только HTML (вся ваша проблема не связана ASP.NET MVC, но связанные с HTML, это может произойти на любой платформе):

Допустим, у вас есть страница 1 (index.html):

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <input type="text" id="txt1" /> 
    <br /> 
    <input type="text" id="txt2" /> 
    <br /> 
    <br /> 
    <button onclick="doStuff();">do stuff</button> 
    <button onclick="goFurther();">go further</button> 

    <script type="text/javascript"> 

     var qs = (function (a) { 
      if (a == "") return {}; 
      var b = {}; 
      for (var i = 0; i < a.length; ++i) { 
       var p = a[i].split('=', 2); 
       if (p.length == 1) 
        b[p[0]] = ""; 
       else 
        b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); 
      } 
      return b; 
     })(window.location.search.substr(1).split('&')); 

     window.onload = function() { 
      var data1 = qs["txt1"]; 
      var data2 = qs["txt2"]; 
      if (data1 == undefined) 
       data1 = ""; 
      if (data2 == undefined) 
       data2 = ""; 
      var textbox1 = document.getElementById("txt1"); 
      var textbox2 = document.getElementById("txt2"); 
      textbox1.value = data1; 
      textbox2.value = data2; 
     } 

     function doStuff() { 
      var textbox1 = document.getElementById("txt1"); 
      var textbox2 = document.getElementById("txt2"); 
      history.pushState('abc', 'title', 'index.html?txt1=' + textbox1.value + "&txt2=" + textbox2.value); 
     } 

     function goFurther() { 
      window.location = "/next.html"; 
     } 
    </script> 
</body> 
</html>

Как вы можете увидеть (и попробовать в проекте) первая кнопка принимает данные в двух полях (текстовых полей в моем чрезмерно упрощенным примере) и устанавливает текущий URL на один с строки запроса, содержащего эти данные (опять же, будучи слишком упрощенным примером, он не выполняет проверку, экранирование, кодирование и т. д.).

Вторая кнопка принимает вас на другую страницу:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Next crp</title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    asdf 
</body> 
</html>

который ставится здесь только для того, чтобы перейти к нему. Переход на первую страницу (нажатие кнопки «Назад» в браузере) приведет к URL-адресу, который был настроен с помощью javascript с помощью строки запроса.

Обработчик onload будет повторно заполнять элементы данными в строке запроса.

Не забудьте найти онлайн-ресурсы о «API истории HTML5».

Надеюсь, этот пример поможет.

источник

2016-07-06 16:19:33

Используйте кнопку «Назад» с формой AJAX?

ответ

Смежные вопросы