[英]How to submit a form using ajax(jquery)?
I am new to ajax and j query. 我是ajax和j查询的新手。 I goggled out for submitting form with ajax however could not worked out.
我很想用ajax提交表单,但是无法解决。
I was trying this: 我正在尝试这个:
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");
}
});});
My Controller class which handles request is:(for Request) 我处理请求的Controller类是:(用于Request)
@RequestMapping(value = "/upcomingLeaves", method = RequestMethod.GET)
public String showForm(@ModelAttribute("loginForm")EmpRegistrationForm profileForm, BindingResult result , HttpServletRequest request, HttpServletResponse response, ModelMap model){
(for Responce): (响应):
@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){
I want this to work like: 我希望它像这样工作:
If I click On one button that request should be posted along with value to the controller and redirect on same page with new content. 如果我单击一个按钮,则该请求应随值一起发布到控制器,并在同一页面上重定向并包含新内容。
I have the jsp page like: 我的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>
Any help would be appreciated. 任何帮助,将不胜感激。
You can use $("#upComing").submit();
您可以使用
$("#upComing").submit();
for submitting form. 提交表格。
duplication of ajax call . 重复ajax调用。
Try to call your request using ajax and then return your request output to the response part. 尝试使用ajax调用您的请求,然后将您的请求输出返回到响应部分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.