避免在提交时自动刷新 jsp 中的页面。答案

【问题标题】：Avoiding automatic refresh of page in jsp on submit.避免在提交时自动刷新 jsp 中的页面。
【发布时间】：2014-05-03 01:38:00
【问题描述】：

我有一个 jsp 视图页面，它使用 datatable 显示使用 serverSideSearch 操作的数据列表。在 jsp 页面上，我有一个带有其他字段的日期选择表单，然后是用于显示数据表的 Generate 按钮。现在的问题是，每当我单击Generate 按钮时，它都会刷新页面然后显示数据表。我不想刷新页面，数据表必须带刷新的数据表。这是我的jsp文件：

<%@ page contentType="text/html; charset=ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%> 
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>
<html>
<head>

<script type="text/javascript">
    $(document).ready(function() {
         if('${pageVisitLogList}' == 'undefined' || '${pageVisitLogList}' == '[]' || '${pageVisitLogList}' == ''){
            $('.container').css('text-align', 'center');
        } 

         var dataTable; //reference to your dataTable

         $('#submitPageLog').click(function() {
             dataTable.fnReloadAjax('pageVisitReport.jsp');
         });

         dataTable= $('#row').dataTable(
        {
            "sDom" : "<'row'<'spanPag'l><'span6'p><'spanSer'f>r>t<'row'<'spanPage'i><'span6'p>>",
            "oLanguage" : {"sLengthMenu" : "_MENU_ records per page"},
            "bServerSide": true,
            "sAjaxSource": "serverSideSearch.action?dateFrom="+$('#fromDate').val()+"&dateTo="+$('#toDate').val(),
            "bProcessing": true,
            "sPaginationType": "full_numbers",        
            "aoColumns": [
                              { "mDataProp": "deviceMacAddress" },
                              { "mDataProp": "deviceName"},
                              { "mDataProp": "facility"},
                              { "mDataProp": "visitTime"},
                              { "mDataProp": "module"},
                              { "mDataProp": "pageVisited"}, 

                          ]   

        }); 


        $("#fromDate").datepicker({
         showOn: 'both',
         buttonImage: "Reports/resources/images/calendar.gif",
         buttonImageOnly: false,
         changeMonth: false,
         changeYear: false,
         showAnim: 'slideDown',
         duration: 'fast'
        });

        $("#toDate").datepicker({
         showOn: 'both',
         buttonImage: "Reports/resources/images/calendar.gif",
         buttonImageOnly: false,
         changeMonth: false,
         changeYear: false,
         showAnim: 'slideDown',
         duration: 'fast'
        });
        $('.ui-datepicker-trigger').css('margin-bottom', '11px');
    });
</script>
<style type="text/css">
    a {
        color: #047CB9;
        text-decoration: none;
    }
</style>
</head>

<body>
<br><br>
  <s:form id="pageVisitLogForm" theme="simple" method="post" >
    <div class="innerTableClass">
    <table align="center" class="table" style="line-height: 2;">
  <tr>
    <td colspan="4" class="searchHeader">Page Visit Report</td>
  </tr>
  <tr>
    <td align="left" colspan="4" class="required"><s:actionerror cssClass="required"/></td>
  </tr>
  <tr>
    <td align="left" style="padding-top: 13px;">Date From</td>
    <td><s:textfield id="fromDate" name="dateFrom" cssStyle="width: 170px; margin-right: 2px;" readonly="true"></s:textfield></td>
    <td align="left" style="padding-left:70px; padding-top: 13px;">Date To</td>
    <td><s:textfield id="toDate" name="dateTo" style="width: 170px; margin-right: 2px;" readonly="true"></s:textfield></td>
  </tr>
  <tr>
    <td align="left" style="padding-top: 13px;">Module</td>
    <td><s:select id="modulePageLog" list="moduleMap" name="module"/></td>
    <td align="left" style="padding-left:70px; padding-top: 13px;"> MAC Address</td>
    <td> <s:textfield name="deviceMacAddress"></s:textfield> </td>
  </tr>
  <tr>
    <td align="left" style="padding-top: 13px;">Facility</td>
    <td ><s:select list="facilityMap" name="facility" /></td>
    <td align="left" style="padding-left:70px; padding-top: 13px;"> App Mode</td>
    <td ><s:select list="appModeMap" name="appMode" /></td>
  </tr>
  <tr>
    <td align="left" style="padding-top: 13px;">Locale</td>
    <td ><s:select list="localeMap" name="currentLocale" /></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4" align="center">
      <s:submit id="submitPageLog" key="label.fetchReport"  action="serverSideSearch.action" />
    </td>
  </tr>
</table>    
</div>
 </s:form>
 <br/><br/>
<div class="container">

        <table id="row" >
            <thead>
                <tr>
                    <th>MAC Address</th>
                    <th>Device Name</th>
                    <th>Facility</th>
                    <th>Visit Time</th>
                    <th>Module</th>
                    <th>Page Visited</th>

                </tr>
            </thead>
            <tbody>
            </tbody> 
        </table>
       </div>
  </body>
  </html>

我搜索并尝试使用fnReloadAjax()，但它不起作用。页面正在刷新...

【问题讨论】：

标签： jquery jsp datatable

【解决方案1】：

您首先应该尝试一个简单的 Ajax 示例并尝试理解它。你可以参考这个：A Simple AJAX with JSP example

或者像这样更复杂的东西肯定会有所帮助 http://www.codecoffee.com/articles/ajax.html

【讨论】：

thnx，它帮助我理解了基本的 ajax 调用。