title: ajax calls to a servlet from jsp form and display it in <div>
body: <p>so i am new to ajax and currently trying to find out how to make ajax call from jsp form and then display it in div.  Below is the jsp form which works fine and loads the data in divOrderResultContainer, i want to know how to get the same result by doing ajax call instead of refreshing the page everytime. </p>
  
  <p>Index.jsp</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/view.css" media="all"&gt;
  &lt;script type="text/javascript" src="JavaScript/jquery-1.12.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="JavaScript/Calender.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div id = "divuserinputContainer"&gt;
  &lt;table align="center" id="table"&gt;
  &lt;form name="orderform" action="OrderController" onsubmit="return validateForm()" method="POST""&gt;         
  &lt;td class="label"&gt;Branch Number
  &lt;select name="branch" &gt;
  &lt;option selected value="0"&gt;All Branches&lt;/option&gt;&lt;option selected value="1"&gt;100&lt;/option&gt;                                                   
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td class="label"&gt;Service Type
  &lt;select class="SelectionBoxes" id="Serviceselect" name="Serviceselect" &gt;
  &lt;option selected value="A"&gt;All&lt;/option&gt;
  &lt;option value="D"&gt;Delivery&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td class="label" &gt;Order Status
  &lt;select class="SelectionBoxes" id="Orderstatus" name="Orderstatus"&gt;
  &lt;option selected value="O"&gt;All&lt;/option&gt;
  &lt;option value="P"&gt;Placed&lt;/option&gt;
  &lt;/select&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;button class="submit" name="submit" id="submit"&gt;Submit&lt;/button&gt;&lt;/td&gt;
  &lt;/form&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div id="divOrderResultContainer"&gt;
  &lt;table id="ViewOrderResultContainer" border=1&gt;
  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;OrderNumber&lt;/th&gt;
  &lt;th&gt;ServiceType&lt;/th&gt;
  &lt;th&gt;OrderStatus&lt;/th&gt;
  &lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;c:forEach items="${orders}" var="order"&gt;&lt;tr&gt;
  &lt;td&gt;&lt;c:out value="${order.ordernumber}" /&gt;&lt;/td&gt;
  &lt;td&gt;&lt;c:out value="${order.slotservice}" /&gt;&lt;/td&gt;
   &lt;td&gt;&lt;c:out value="${order.orderstatus}" /&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/c:forEach&gt;&lt;/tbody&gt;&lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>my servlet OrderController.java </p>
  
  <pre><code>@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);        
      }
  
      }
  </code></pre>
  
  <p>Can someone explain to me about how can we do ajax call from jsp form after the user click the submit button or point me to a good examples ?  Thanks in advance !!!</p>