As I navigate my way through learning about ajax, I am currently exploring how to execute an ajax call from a JSP form and then showcase the result in a designated div. The following JSP form effectively loads data into divOrderResultContainer; however, I am seeking guidance on achieving the same outcome using an ajax call instead of having to refresh the page each time.
The Index.jsp file:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/view.css" media="all">
<script type="text/javascript" src="JavaScript/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="JavaScript/Calender.js"></script>
</head>
<body>
</div>
<hr>
<div id = "divuserinputContainer">
<table align="center" id="table">
<form name="orderform" action="OrderController" onsubmit="return validateForm()" method="POST"">
<td class="label">Branch Number
<select name="branch" >
<option selected value="0">All Branches</option><option selected value="1">100</option>
</select>
</td>
<td class="label">Service Type
<select class="SelectionBoxes" id="Serviceselect" name="Serviceselect" >
<option selected value="A">All</option>
<option value="D">Delivery</option>
</select>
</td>
<td class="label" >Order Status
<select class="SelectionBoxes" id="Orderstatus" name="Orderstatus">
<option selected value="O">All</option>
<option value="P">Placed</option>
</select>
</td>
<td>
<button class="submit" name="submit" id="submit">Submit</button></td>
</form>
</tbody>
</table>
</div>
<hr>
<div id="divOrderResultContainer">
<table id="ViewOrderResultContainer" border=1>
<thead><tr><th>OrderNumber</th>
<th>ServiceType</th>
<th>OrderStatus</th>
</tr></thead><tbody><c:forEach items="${orders}" var="order"><tr>
<td><c:out value="${order.ordernumber}" /></td>
<td><c:out value="${order.slotservice}" /></td>
<td><c:out value="${order.orderstatus}" /></td>
</tr></c:forEach></tbody></table>
</div>
</body>
</html>
The OrderController.java servlet:
@WebServlet(name="OrderServlet",urlPatterns={"/OrderController"})
public class OrderController extends HttpServlet {
private static final long serialVersionUID = 1L;
public OrderController() {
super();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Int branchNumber = request.getParameter("branch");
String serviceType = request.getParameter("Serviceselect");
OrderDao dao = new OrderDao();
try {
request.setAttribute("orders",dao.getallorders(branchNumber,serviceType));
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
RequestDispatcher view = request.getRequestDispatcher("Index.jsp");
view.forward(request, response);
}
}
I would appreciate any insights on how to implement an ajax call from a JSP form after the user clicks the submit button, or if you could direct me to some useful examples. Thanks in advance!!!