Question

我使用ajax创建表。当我单击按钮时，它将读取行并使用ajax创建表单。这里一切都很好。但是，当我单击浏览器上的后退按钮时，数据以某种方式发布/显示为FORM。单击返回时如何删除/防止这种情况。我读过的东西： 1）清除表格输入。但是在哪里读取输入，因为在单击按钮时使用函数SubmitRowAsForm创建了表单 2）禁用自动完成功能。但这似乎不相关，并且不起作用。

$(document).ready(function update(){
    $.ajax({
      url: 'getSchedule.php',
      success: function(data,status)
      {
        createTableByForLoop(data);
      },
      async:   true,
      dataType: 'json'
    }).then(function() {           // on completion, restart
      setTimeout(update, 30000);  // function refers to itself
   });; 


});


function createTableByForLoop(data)
{
    var table = "\
    <div class='table-scrollable'>\
    <table class=\"table table-responsive\">\
    <thead >\
        <tr>\
          <th class=\"d-none\">ID</th>\
          <th class=d-none>SHOWSCHEDULE_ID ID</th>\
          <th>TITLE</th>\
          <th>TIME</th>\
          <th>ACTION</th>\
        </tr>\
      </thead>\
      <tbody>"

      for(var i=0; i<data.length;i++)
      {
        table += "<tr id=\""+i+"\">";
        table += "<td class=d-none><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_ID value=\""+data[i]['SHOWSCHEDULE_ID']+"\" readonly></td>";
        table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWSCHEDULE_SHOWTITLE value=\""+data[i]['SHOWSCHEDULE_SHOWTITLE']+"\" readonly></td>";
        table += "<td><input type=text class=\"form-control transparent-input\" name=SHOWBEGINTIME value=\""+data[i]['SHOWBEGINTIME']+"\" readonly> - <input type=text class=\"form-control transparent-input\" name=\""+data[i]['SHOWENDTIME']+"\" value=\""+data[i]['SHOWENDTIME']+"\" readonly></td>";
        table += "<td><button onclick=submitRowAsForm("+i+") id=btnRoom class=\"btn btn-outline-success\" >Room</button>\
                           <button onclick=submitRowAsForm("+i+") id=btnBook class=\"btn btn-outline-warning\" >Book</button></td>";
        table += "</tr>";
      }
      table +="</tbody></table></div>";
      $('#idShowSchedule').html(table);

}


function submitRowAsForm(id) {
    form=document.createElement('form');
    form.method='POST';
    form.action='OrderTicket.php';

    $("#"+id).children().each(function() {
      $(this).children().each(function(){
          $(this).clone().appendTo(form);
      });
    });
    document.body.appendChild(form);
    form.submit();

}

Answer 1

为了防止出现后退按钮，我将在您的页面上设置一个肮脏的标志。这样，设置好后，您就知道您已经完成了此操作。所以

检查是否设置了脏标志
如果未设置脏标志
加载数据，因为这是页面的全新加载。

请确保在DOM内容加载后执行此操作，否则在某些浏览器中将失败。

这是我在一个旧项目中没有做到这一点的例子

document.addEventListener("DOMContentLoaded", function (event) {
    var dirty = 0;
    var dirtyEl = document.getElementById('page_is_dirty')
    if (!dirty && dirtyEl && (dirtyEl.value != "0" && dirtyEl.value != "")) {
        dirty = 1;
    }
    else if (dirtyEl) {
        dirtyEl.value = '1';
    }
    var el = document.getElementById('ClickApp');
    if (el && !dirty)
        el.innerHTML = "<div id='ClickApp' ng-view='' click-main><br /><br /><center><h2>Loading Calendar</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
    else {
        var dirtyMEl = document.getElementById('page_is_dirty_message');
        var dirtyMSG = dirtyMEl ? dirtyMEl.value : "You arrived here by hitting the back button. Please start over.";
        el.innerHTML = "<div><br /><br /><center><h2>" + dirtyMSG + "</h2><br /><span id='ErrorInstructions'></span><br /><div class='ui-progress-bar ui-container' id='progress_bar' style='width: 350px'><div id='progressBar' class='ui-progress' style='width: 0%; float: left'></div></div><br /><br /><small><span id='LastError'></span></small></center></div>";
    }
    if (!dirty) {
        //Do your data loading. Page transformaions, whatever
        ...
    }});

防止Java表单在Back单击时使用Back数据

1 个答案: