javascript - 如何保存页面之间ajax查询的结果

Question

背景信息

我有一个包含搜索页面的 Web 应用程序。此搜索提供了 3 个通过 ajax 填充的不同下拉框。 当您首次加载页面时，框 1 中会填充默认位置列表。 当用户选择一个位置时，同一页面上会出现第二个下拉菜单，并通过 ajax 填充所选位置内的建筑物。 选择建筑物后，会出现一个带有房间列表的最终下拉框。 用户选择房间后，页面会显示有关该房间的详细信息，并且用户可以深入了解其中一个房间属性 - 这会将他们带到一个新页面。

问题描述

当用户完成查看房间详细信息网页并点击“后退”按钮时，我希望能够向他们展示他们上次离开的位置......这是包含他们之前所有选择的搜索页面引导他们了解房间的详细信息。目前，当他们点击后退按钮时，会加载默认搜索页面，并且之前的选择会消失。

保留搜索请求详细信息的最佳方式是什么？ 我正在考虑向 URL 添加值......就像查询字符串一样。现在，URL 当然不会改变，因为搜索页面的一切都是通过 ajax/javascript 完成的。 但除了这个选项之外，我想知道是否还有其他想法/方法来完成同样的事情。

该解决方案必须适用于所有浏览器，包括 IE、Chrome、FFox、Safari。

代码

更改下拉列表中的值时触发的 ajax 代码:

 $('#Locations').live('change',function(){
    $.ajax({
        url:"<?php echo site_url('mycontroller/getbuildings/');?>" + "/" + $selectedvalue,
        type:'GET',
        dataType:'json',
        success: function(returnDataFromController) {

             logic to populate building drop down
        }


 $('#buiding_Locations').live('change',function(){
     $('#room_locations').html('');
     $('#search').hide();
      var htmlstring;
      $selectedvaluebranch_ = $('#Locations').val();
      $selectedvaluebuiding_ = $('#buiding_Locations').val();

      $.ajax({
                url:"<?php echo site_url('mycontroller/getrooms');?>" + "/" + $selectedvaluebuiding_,
                type:'GET',
                dataType:'json',
                success: function(returnDataFromController) {
                    logic to populate room list
                }

在填充“位置”下拉列表的方法中，(mycontroller/getLocations) 我添加了使用/检查 session 变量的逻辑...现在，当我单击后退按钮时，将保存位置选择。 “mycontroller/getLcations”方法是加载搜索页面时调用的默认方法。

但我想知道填充其他两个下拉框的最佳方法。正如您所看到的，仅当用户更改“父”下拉框的值时才会填充它们。

也许我需要在我的 Controller 中创建另一个方法来查询所有 3 个盒子..并将所有数据发送到前端，而不是像我现在这样做的方式...通过 3 个单独的调用3 种单独的方法。 然后我需要将填充各个下拉框的逻辑从它们现在所在的位置移出到一个可重用的函数，该函数可以在用户做出新选择时或当我尝试使用时调用 session 变量中的搜索数据。

如果有更简单的方法，请告诉我。我只是想确保我没有编写不必要的额外代码/我正在正确重构。

Answer 1

您可以在每次加载新下拉列表的 AJAX 调用时，存储一个指示下拉列表状态的 session 变量。然后，只需获取这些结果即可显示您之前选择的内容。

<小时/>

编辑:

你正在做的事情看起来很不错。一些改进建议:

• 您可以通过创建一个 javascript 变量(如 var mainURL = <?=site_url() ?>; )来摆脱 jQuery 中的 PHP 标签。这将允许将您的函数放入可以缓存的文件中，因此您可以更好地分离 JS/PHP。
• 为了获得更大的灵 active ，可以考虑使用 POST 而不是 GET 吗？这可以允许添加一个变量来说明正在选择哪种表单，并在返回的数据中添加一个变量来指示要填充的字段:因此，您只需要一个 $.ajax实例。

例如，类似:

function updateForms(type,value){
 $.ajax({
      url:mainURL+"/mycontroller/getdata",
      type:"POST",
      data:{
            dropdownSelected:type,
            value:value
      },
      success:function(returnData){
            populate(returnData.form);
      });