Question

我有一个带有表单的网页，它使用Ajax动态创建下面的数据但是当用户刷新页面时它会消失，但下拉菜单仍然有其选择。无论如何要么保留动态生成的数据还是重新提交Ajax调用？

的index.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="zh-HK" />
    <script type="text/javascript" src="includes/js/paginator.js"></script>
    <script type="text/javascript" src="includes/js/scripts.js"></script>
    <link rel="stylesheet" href="includes/css/styles.css"></link>
    <title>Course Search</title>
</head>
<body>
    <form id="show_course">
        <table id="search">
            <tr>
                <th class="reset">
                    <label><a href="#" name="session" onclick="showCourse(this.value, 'destroy');document.getElementById('show_course').reset();"><img src="images/reset.gif" alt=""/></a></label>
                </th>
                <th class="subject">
                    <select name="subject" onchange="showCourse(this.value, 'Subject');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Math">Math</option>
                        <option value="Math%20-%20M2">Math - M2</option>
                        <option value="Maths%20%26%20Statistics (A)">Maths &amp; Statistics (A)</option>
                        <option value="Math Core">Math Core</option>
                    </select>
                </th>
                <th class="tutor">
                    <select name="tutor" onchange="showCourse(this.value, 'Tutor');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Math">Math</option>
                    </select>
                </th>
                <th class="level">
                    <select name="level" onchange="showCourse(this.value, 'Level');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="P1">P1 - Primary 1</option>
                    </select>
                </th>
                <th class="type">
                    <select name="type" onchange="showCourse(this.value, 'Type');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="Regular">Regular</option>
                        <option value="Intensive">Intensive</option>
                    </select>
                </th>
                <th class="centre">
                    <select name="centre" onchange="showCourse(this.value, 'Centre');disableEnableForm(document.getElementById('show_course'), false);">
                        <option selected="selected" value=""></option>
                        <option value="1">紅磡 - Hung Hom</option>        
                    </select>
                </th>
            </tr>
        </table>
    </form>
    <div id="dynamic_display"></div>
</body>
</html>

scripts.js中：

function openTimetable()
{
    timetableWindow=window.open('timetable.php','timetable','status=no,left='+(screen.availWidth/2-200)+',top='+(screen.availHeight/2-200)+',height=400,width=400,scrollbars=yes');
    timetableWindow.focus()
}

function disableEnableForm(form, boolean)
{
    var formElements = form.elements;

    for (i = 0; i < form.length; i ++) {
        formElements[i].disabled = boolean;
    }
}

function showCourse(search, key)
{
    if (search == "") {
        document.getElementById("dynamic_display").innerHTML = "";
        return;
    }

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("dynamic_display").innerHTML = xmlhttp.responseText;
            pager = new Pager('results', 15);
            pager.init(); 
            pager.showPageNav('pager', 'pager_display'); 
            pager.showPage(1);
        }
    }

    xmlhttp.open("GET", "search.php?key=" + key + "&search=" + search, true);
    xmlhttp.send();
}

Answer 1

我不知道如何在页面刷新之间保持数据，但我认为使用事件window.onload可以调用任何JavaScript函数。以下是示例link text

但请记住，window.onload会在整个页面加载时触发，因此，如果您的页面很大，请考虑window.onDomReady。 Example

Answer 2

假设在任何给定时间只会更改其中一个选项，请尝试：

window.onload=function() {
  var selects = document.getElementsByTagname('select');
  for (var i=0;i<selects.length;i++) {
    if (selects[i].selectedIndex>0) { // something was selected
      selects[i].onchange();
      break;
    }
  }
}

页面刷新后自动调用Ajax

2 个答案: