Question

我是ajax和j查询的新手。我很高兴用ajax提交表格，但无法解决。

我正在尝试这个：

CDN:<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   $("#btnAccept").click(function(){

   $("#btnCancel").show();
    $.ajax({
    type:"post",
    url:"upcomingLeaves.do",
    dataType: "",
    success: function(){
    alert("success");
    }

});});

我处理请求的Controller类是:(对于Request）

@RequestMapping(value = "/upcomingLeaves", method = RequestMethod.GET)
       public String showForm(@ModelAttribute("loginForm")EmpRegistrationForm profileForm, BindingResult result , HttpServletRequest request, HttpServletResponse response, ModelMap model){

（对于回应）：

@RequestMapping(value = "/upcomingLeaves" ,method = RequestMethod.POST)
    public String ApproveLeaves(@RequestParam(required=false , defaultValue="")String aion,@RequestParam(required=false,defaultValue="")String Cancel,HttpServletRequest request, HttpServletResponse response, ModelMap model){

我想要这样工作：

如果我点击一个按钮，该请求应与控制器一起发布，并在同一页面上重新定向新内容。

我有jsp页面，如：

<form:form id="upComing" action="upcomingLeaves.do" commandName="loginForm" modelAttribute="loginForm">        
    <table>
      <thead>
        <tr style="background-color:#666633;">
              <th>Employee id</th>
              <th>Leave Balance</th>
              <th>Date</th>
              <th>Leave Type</th>
              <th>Leave Period</th>
              <th>Applied Leaves</th>
              <th>Status</th>
              <th colspan="4">Action</th>
        </tr></thead>
      <tbody>
      <c:choose>
        <c:when test="${not empty upcomingLeavesList}">
            <c:forEach items="${upcomingLeavesList}" var="upComLeave">
                <tr>
                    <td><span>${upComLeave.employee_id}</span></td>
                    <td><span>${upComLeave.no_of_leave}</span></td>
                    <td><span>${upComLeave.fromDate} - ${upComLeave.toDate}</span></td>
                    <td><span>${upComLeave.leaveType}</span></td>
                    <td><span>${upComLeave.leavePeriod}</span></td>
                    <td><span>${upComLeave.appliedLeave}</span></td>
                    <td id="status"><span>${upComLeave.leaveStatus}</span></td>


                    <c:if test="${upComLeave.leaveStatus eq 'Pending' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnAccept" name="action"  value="Accept${upComLeave.employee_id}">Accept</button></td>
                            <td><button id="btnReject" name="action"  value="Reject${upComLeave.employee_id}">Reject</button></td>
                    </c:if>


                    <c:if test="${upComLeave.leaveStatus eq 'Approved' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnCancel" name="action" >Cancel</button></td>
                    </c:if>
                    <c:if test="${upComLeave.leaveStatus eq 'Canceled' }"> <!-- check status if accepted, don't render Accept button -->
                             <td><button id="btnAccept" name="action">Accept</button></td>
                    </c:if>
                    <c:if test="${upComLeave.leaveStatus eq 'Rejected' }"><!-- //check status if accepted, don't render Reject button -->
                        <td><button id="btnReject" name="action" type="submit" value="Reject${upComLeave.employee_id}">Reject</button></td>
                    </c:if>
                   <%--  <c:if test="${upComLeave.leaveStatus eq 'Canceled' }"><!-- //check status if cancel, render cancel button -->
                        <td><button id="btnAccept" name="action"  value="Accept${upComLeave.employee_id}">Cancel</button></td>
                    </c:if> --%>
                </tr>
            </c:forEach>
        </c:when>
        <c:otherwise>
            upcomingLeavesList is empty or null..
        </c:otherwise>
      </c:choose>
      </tbody>      
  </table>
</form:form>

任何帮助都将不胜感激。

Answer 1

您可以使用$("#upComing").submit();提交表单。

Answer 2

重复ajax调用。

尝试使用ajax调用您的请求，然后将您的请求输出返回给响应部分。

如何使用ajax（jquery）提交表单？

2 个答案: