加载弹出jsp页面视图jsp无页面刷新使用jQuery-ajax

我有两个jsp页面1.view.jsp，2.popup.jsp（它是一个弹出页面）。popup.jsp将在加载时我点击view.jsp上的“添加图标”。只是我想知道如何在我的'popup.jsp'上使用Ajax单击'submit'按钮时在我的'view.jsp'中加载值（不刷新页面）。加载弹出jsp页面视图jsp无页面刷新使用jQuery-ajax

view.jsp的

<body> 

<div class="st-content"> 
      <jsp:include page="/WEB-INF/jsp/settings/adminmenu.jsp" /> 

<div class="width1"> 
    <div class="mgmt-menu-bar font-new"> 
      <div class="margin-left10 margin-top line-height1 "> 

      <a href="executeIndustry"> 
        <div class="menunew cursor red"> 
        <i class="icon-list icon-grey1"></i> &nbsp;Industry</div> 
        </a> 
        <a href="viewDepartment"> 
        <div class="menunew cursor" ><i class="icon-list icon-grey1"></i> &nbsp;Department</div> 
        </a> 
        <a href="addViewDesignation"> 
        <div class="menunew cursor" ><i class="icon-list icon-grey1"></i> &nbsp;Designation</div> 
        </a> 


       </div> 
      </div> 
      <div class="mgmt-content-right"> 
       <div class="width2 margin-left10"> 
      <div class="content-table-full"> 
       <div class="content-h bold margin-left margin-top">Industry 
       <div class="top-right-icon2 cursor" data-toggle="tooltip" title="Add Industry" onclick="TINY.box.show({iframe:'addPageIndustry.action',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})" > 
       <i class="icon-plus icon-grey1"></i> 
      </div> 
       </div> 
       <s:form action="executeIndustry" name="paginationForm" id="paginationForm"> 
       <s:hidden name="industryId" id="industryId"/> 

       <s:if test="%{success!=null}" > 
      <div id="error" style="color:#048350;margin-top: 10px" > 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<s:property value="success"/> 
      <br/> 
     </div> 

    </s:if> 
    <s:if test="%{error!=null}" > 
     <div id="error" style="color: #FF0000;margin-top: 10px"> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<s:property value="error"/> 
      <br/> 
     </div> 

    </s:if> 

       <table width="100%" cellpadding="0" cellspacing="0" class="margin-bottom margin-top table-display"> 

        <tr class="row-header"> 
         <td > 
         &nbsp;Industry </td> 
         <td width="450">Created Date</td> 

         <td width="200">Action</td> 
        </tr> 
        <s:if test="%{industrylist!= null && industrylist.size > 0}"> 
         <s:iterator value="industrylist"> 
         <tr class="row1"> 
          <td >&nbsp;<s:property value="industryName"/></td> 

          <td> <s:date name="createdDate" format="dd/MM/yyyy hh:mm:ss a"/></td> 

          <td> 
           <i class="icon-edit icon-grey1 cursor" title="Edit" data-toggle="tooltip" onclick="TINY.box.show({iframe:'editIndustry.action?editid=<s:property value="industryId"/>',boxid:'frameless',width:456,height:200, fixed:false,maskid:'bluemask',maskopacity:40})"></i> 
           &nbsp;<i title="Delete" data-toggle="tooltip" onclick="deletethis('<s:property value="industryId"/>')" class="icon-minus-sign icon-grey1 cursor"></i> 


          </td> 


         </tr> 
         </s:iterator> 
        </s:if> 
        <s:else> 
        <tr class="row1"> 
        <td colspan="4" align="center">No industries were found</td> 
        </tr> 
        </s:else> 

        <s:hidden name="deleteid" id="deleteid"></s:hidden> 

       </table> 
       <div class="width2"> 
       <s:if test="%{industrylist.size()>0}"> 
         <%@ include file="/WEB-INF/jsp/pagenation/pagination.jsp" %> 
         </s:if> 
       </div> 
       </s:form> 
       </div> 
      </div> 
     </div> 
</div> 


     </div> 

      <jsp:include page="/common/commonfooter.jsp" /> 
      <script type="text/javascript" src="shared/scripts/js/pagination.js"></script> 
</div> 


popup.jsp 

<body> 
<div class="pop-box"> 
    <s:if test="%{edit!=1}" > 
    <s:form action="addIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate"> 

    <span style="margin-left:10px;" class="heading-st2">Add Industry</span> 
    <div class="popup-style"> 
     <div class="row-form"> 
     <span class="red">*</span>Industry 
     </div> 
     <div class="row-form "> 
      <s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" /> 
     </div> 
     <div class="row-form"> 

     <button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button> 
        <span class="help-inline"></span> 
     </div> 
    </div> 
    </s:form> 
    </s:if> 

    <s:else> 

    <s:form action="updateIndustry" method="post" id="FormOne" name="FormOne" target="_top" cssClass="validate"> 
    <s:hidden name="industryId"/> 
    <span style="margin-left:10px;" class="heading-st2">Edit Industry</span> 
    <div class="popup-style"> 
     <div class="row-form"> 
     <span class="red">*</span>Industry 
     </div> 
     <div class="row-form "> 
      <s:textfield name="industryName" id="industryName" cssClass="input-xlarge required-field" oncopy="return false" onpaste="return false" oncut="return false" onkeypress="return isNumberKey(event)" maxlength="60" /> 
     </div> 
     <div class="row-form"> 

     <button type="submit" class="btn btn-success ">Submit <i class="icon-ok icon-white"></i></button> 
        <span class="help-inline"> 

        </span> 
     </div> 
    </div> 
    </s:form> 
    </s:else> 



</div>

来源

2013-10-18 Umar Mukthar Kadher Ibrahim

$(document).ready(function(){ 
    var frm = $('#myform'); 
    frm.submit(function (ev) { 
      $.ajax({ 
      type: frm.attr('method'), 
      url: frm.attr('action'), 
      data: frm.serialize(), 
      success: function (data) { 
       alert("submitted"); 

      }, 
     error:function(data){ 
      alert("error"); 
     } 
     }); 
     window.scrollTo(0,0); 

     ev.preventDefault(); 
    });

以上的jQuery AJAX可以帮助你，而无需刷新陪你的行动submittion ...

来源

2013-11-29 06:23:50 Arun

加载弹出jsp页面视图jsp无页面刷新使用jQuery-ajax

回答

相关问题