通过ajax提交按钮

时间:2016-05-26 11:33:16

标签: javascript java jquery ajax jsp

首先查找我的2个jsp文件

actvCancel.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> --%>
<%@ taglib prefix="kfmt" uri="http://kimaya.com/jsp/tlds/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page session="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoldwinMH (B.S.Enterprises)</title>
      <link rel="stylesheet" href="<c:url value="/resources/css/style.css" />" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js" > </script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Load jQuery UI Main JS  -->
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="<c:url value="/resources/js/main.js" />" ></script>
     <link rel="stylesheet" href="<c:url value="/resources/css/runnable.css" />"/>
    <!--<script type="text/javascript" src="/resources/js/script.js"></script> -->
    <script type="text/javascript" src="resources/js/zebra_datepicker.js"></script>
    <link rel="stylesheet" href="<c:url value="resources/css/default.css" />"/>
    <script type="text/javascript" src="resources/js/date.js"></script>

</head>
<body>
<font style='color:#3A3A3A;font-size:0.9em;font-weight:bold;'> Report Name : Active/Cancel Report</font>


<form onSubmit=return isValiDate(startDate,endDate) action="/webpanel/ActvCancelP" method="post">

    <table border="1" width="80%" align="center">
     <tr>
        <td>
            From Date:<input size='10' id="from" name="startDate" value='' />
            <%-- <img src="<c:url value="/resources/image/calendar.jpg" />"/>  --%>
        </td> 
        <td>
            To Date:<input size='10' id="to" name="endDate" value='' />
            <%-- <img src="<c:url value="/resources/image/calendar.jpg" />"/>  --%>
        </td>
        <td rowspan="2">
            <input type="submit" value="SUBMIT">
        </td>

     </tr>  

     <tr>
        <td>    
        User Name:
        <select id="Parent" name="Parent">

            <option value="1">MAIN STOCKIEST</option>
            <c:forEach var="ClientList" items="${balList}">
                <option value="${ClientList.linkID}">${ClientList.name}</option>
            </c:forEach>

        </select>
        </td>

        <td>
            View Status:
            <select id="Status" name="Status">
                <option value="1">ACTIVE</option>
                <option value="0">CANCEL</option>
            </select>
        </td>
        </tr>

    </table>

</form>

    <form name="frm" method="post" target="center" action="/webpanel/ActvCancelP">
                <input type=hidden name=parentid>
                <input type=hidden name=menulogin>
                <input type=hidden name=nsec>
    </form>

</body>    
</html> 

2 nd jsp 的 actvCancelRpt.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> --%>
<%@ taglib prefix="kfmt" uri="http://kimaya.com/jsp/tlds/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoldwinMH (B.S.Enterprises)</title>
      <link rel="stylesheet" href="<c:url value="/resources/css/style.css" />" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js" > </script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
    <script src="<c:url value="/resources/js/main.js" />" ></script>
</head>
<body>
<fmt:setLocale value="en_GB"/>

<c:if test="${empty ClientList }">
    <center><h1>Sorry, No data found</h1></center>
</c:if>

<c:if test="${not empty ClientList}" >
<br><table id=mydatatable class=mydatatable border="1" class="display" style='border-collapse: collapse; border-spacing: 0;background:#FFFFFF'>
<thead><tr style='background:#002232'><td><font color="#FFFFFF" size="2"><b>Sr.No.</b></font></td>
<th><font color="#FFFFFF" size="2"><b>ParentID</b></font></th>
<th><font color="#FFFFFF" size="2"><b>LinkID</b></font></th>
<th><font color="#FFFFFF" size="2"><b>Name</b></font></th>
<th><font color="#FFFFFF" size="2"><b>Active Date</b></font></th>
<th><font color="#FFFFFF" size="2"><b>Cancel Date</b></font></th>
<th><font color="#FFFFFF" size="2"><b>NoOFdays</b></font></th>
<th><font color="#FFFFFF" size="2"><b>MRP Sale</b></font></th>
<th><font color="#FFFFFF" size="2"><b>Status</b></font></th></tr>
</thead>
<tbody>

    <c:forEach items="${ClientList}" var="client" varStatus="loop">

        <%-- <c:out value="${client.status eq 'Active' ? '<tr align=center bgcolor=#C0C0C0>': '<tr align=center bgcolor=#FFFFFF>'}"/> --%>

      <tr>
        <td align=center><c:out value="${loop.index+1}"/></td>
        <td><c:out value="${client.pLinkID}"/></td> 
        <td><c:out value="${client.linkID }"></c:out>
        <td><c:out value="${client.name }"></c:out>
        <td><c:out value="${client.aDate }"></c:out>
        <td><c:out value="${client.cDate }"></c:out>
        <td><c:out value="${daysMap[client.linkID]}"></c:out>
        <td align=right><kfmt:formatNumber number="${mrpSale[client.linkID]}" /></td>
        <td><c:out value="${client.status}"></c:out>
    </c:forEach>
</tbody>
</table>
</c:if>    
<script>
$(document).ready(function() {
    $('#mydatatable').DataTable();
} );
</script>
            <form name="frm" method="post" target="center" action="/webpanel/ActvCancelP">
                <input type=hidden name=parentid>
                <input type=hidden name=menulogin>
                <input type=hidden name=nsec>
            </form>
</body>
</html>

现在当我提交actvCancel.jsp时,我想在同一页面上显示actvCancelRpt.jsp的输出(actvCancel.jsp)我知道AJAX会对我有所帮助,但我不知道如何做到这一点。如果有人对此有所了解,请帮助我。

提前致谢。

1 个答案:

答案 0 :(得分:0)

您可以查看此Form submit and Ajax at the same time using onsubmit?。在您收到回复后,您可以使用<jsp:include page="..." />来包含报告。