title: How to integrate JQuery Ajax POST/GET to Spring MVC
body: <p>Hello guys I'm new in Jquery and ajax, I don't know how to figure out this blockage any help will be appreciated. I want to dynamically implement a drop down box using JQuery ajax, i have seen so many example out. I tested one implementation which work perfectly when I run it. But I tried to apply the same code to my Spring MVC project and added the same libraries to my projecbut it is not working.
  - I am using Alert for debugging As you will see in my Js code, I am able to enter the Js <code>getCategoryForSelectedProduct()</code> method but that's all it is not calling the method in the Rest controller thought the url is correct (it is the same url in fact the same code i used in the example I found on this url: [link to Spring MVC example][1] I have added a new link to that example that work similarly as Example1 and not in my Spring MVC Project. I suspect that it is a configuration or libraries mismatch issues but I am lost.</p>
  
  <p>I am sure that the problem lies on the fact that <code>$ajax()</code> post request is not accessing the <code>@ResController</code>  </p>
  
  <p>I want to dynamically populate Category list base on choosen product</p>
  
  <p>I am such able to enter the Js after setecing a particular product But ajax post request is not working.</p>
  
  <h1>NavigationController.java</h1>
  
  <pre><code>    @Autowired
      IPerformanceDao performanceDao;
  
      @RequestMapping(value = "/loadReport", method = RequestMethod.GET)
      public String ManageIntroducer(ModelMap modelMap) {
  
              ModelAndView mv = new ModelAndView();
  
              Introducer introducer = new Introducer();
              Product product = new Product();
  
              Category category = new Category();
              SubCategory subCategory = new SubCategory();
              int affiliateId = 1;
              List&lt;Product&gt; lstprd = performanceDao.getAllProducts(affiliateId);
              List&lt;Category&gt; lstctg = performanceDao.getAllCategoriesByProductId(product.getProductId());
              List&lt;SubCategory&gt; sbctglst = performanceDao.getAllSubCategoriesByCategoryId(1);
              List&lt;Introducer&gt; itrdclst = performanceDao.getAllIntroducers(affiliateId);
  
              modelMap.addAttribute("productEntity", product);
              modelMap.addAttribute("introducerEntity", introducer);
              modelMap.addAttribute("categoryEntity", category);
              modelMap.addAttribute("subCategoryEntity", subCategory);
  
              modelMap.put("introducerList", itrdclst);
              modelMap.put("productList", lstprd);
              modelMap.put("SubCategoryList", sbctglst);
              modelMap.put("CategoryList", lstctg);
  
              mv = new ModelAndView("loadReport", "command", product);
  
              return "loadReport";
          }
  </code></pre>
  
  <h1>CategoryRestController.java</h1>
  
  <pre><code>     @RestController
          @RequestMapping("/dropdown")
          public class CategoryRestController {
  
          @Autowired
          private CategoryService categoryService;
  
          @RequestMapping(value = "getCategoryForSelectedProduct", method = RequestMethod.POST, headers="Content-Type=application/json")
          public @ResponseBody List&lt;String&gt; getCitiesForSelectedState(@RequestParam(value = "productName", required = true) String productName) {
              System.out.print("in getcategories method with productId : "+productName);
              List&lt;String&gt; ctgList = new ArrayList&lt;String&gt;();
              ctgList.add("Select Category");
  
              ctgList.addAll(categoryService.getAllCategoriesByProductName(productName));
  
              return ctgList;
          }
  </code></pre>
  
  <h1>loadReport.jsp</h1>
  
  <pre><code>    &lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
      &lt;%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %&gt;
      &lt;%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
      &lt;%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%&gt;
      enter &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="&lt;%=request.getContextPath()%&gt;/resouces/css/style.css" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;title&gt;Manage Introducer&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;table width="100%" id="loanTable"&gt;
      &lt;tr&gt;
      &lt;td align="right"&gt;  
      &lt;!-- include top right menu jsp --&gt;   
      &lt;jsp:include page="topRightMenu.jsp" /&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;      
      &lt;!-- content for main body --&gt;
      &lt;table width="100%"&gt;
      &lt;tr&gt;
      &lt;td width="20%" valign="top"&gt; 
      &lt;!-- left menu --&gt;
      &lt;jsp:include page="leftMenu.jsp" /&gt;
      &lt;/td&gt;
      &lt;td width="80%" valign="top"&gt; 
      &lt;!--main body --&gt;
      &lt;div id="mainBody"&gt;
      &lt;table border="0" width="100%" height="600"&gt;
  
      &lt;tr&gt;&lt;td valign="top"&gt; 
  
      &lt;div class="springajax" style="width:450px; height:150px;"&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td &gt;AJAX Cascading &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Select Product&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="product" id="product" onblur="getCategoryForSelectedProduct()"&gt;
                          &lt;option value="Select Product"&gt;Select Product&lt;/option&gt;
                          &lt;c:forEach items="${productList}" var="p"&gt;
                              &lt;option value="${p.productName}"&gt;${p.productName}&lt;/option&gt;
                          &lt;/c:forEach&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Select Category&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select id="category" name="category"&gt;
                          &lt;option value="Select Category"&gt;Select Category&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;div id="loading"&gt;&lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;&lt;br&gt;
      &lt;/div&gt;
  
      &lt;div align="center"&gt;
          &lt;form:form modelAttribute="introducerEntity" method="post" action="saveIntroducer" commandName="introducerEntity"&gt; 
         &lt;font color="red"&gt; ${message} &lt;/font&gt;
         &lt;table &gt;
  
          &lt;tr&gt;
               &lt;td&gt;&lt;form:label path="subCategoryId"&gt;SubCategory Name:&lt;/form:label&gt;&lt;/td&gt;
                  &lt;td&gt;
                     &lt;form:select path="subCategoryId"&gt;
                          &lt;form:options items="${SubCategoryList}" itemLabel="subCategoryName" itemValue="id" /&gt;
                     &lt;/form:select&gt;
                  &lt;/td&gt;
            &lt;/tr&gt;
  
            &lt;tr&gt;
               &lt;td&gt;&lt;form:label path="agencyId"&gt;Agency:&lt;/form:label&gt;&lt;/td&gt;
               &lt;td&gt;
                          &lt;form:select path="agencyId"&gt;
                          &lt;form:options items="${agencyList}" itemLabel="Name" itemValue="Id" /&gt;
                          &lt;/form:select&gt;
                          &lt;td&gt;&lt;form:hidden  path="Id" /&gt;&lt;/td&gt;
  
            &lt;/tr&gt;
  
            &lt;tr&gt;
               &lt;td&gt;&lt;form:label path="firstName"&gt;First Name&lt;/form:label&gt;&lt;/td&gt;
               &lt;td&gt;&lt;form:input path="firstName" /&gt;
            &lt;/tr&gt;  
            &lt;tr&gt;
               &lt;td&gt;&lt;form:label path="lastName"&gt;Last Name&lt;/form:label&gt;&lt;/td&gt;
               &lt;td&gt;&lt;form:input path="lastName" /&gt;
               &lt;form:hidden path="affiliateId" /&gt;&lt;/td&gt;
            &lt;/tr&gt;  
             &lt;tr&gt;
               &lt;td&gt;&lt;form:label path="active"&gt;is Active ?&lt;/form:label&gt;&lt;/td&gt;
               &lt;td&gt;&lt;form:checkbox path="active" /&gt;&lt;/td&gt;
            &lt;/tr&gt; 
            &lt;tr&gt;
            &lt;td&gt;&lt;/td&gt;
               &lt;td &gt;
                  &lt;input class="tag-btn " type="submit" value="Add"/&gt;
               &lt;/td&gt;
            &lt;/tr&gt;
         &lt;/table&gt;
         &lt;/form:form&gt;
        &lt;/div&gt; 
  
  
      &lt;div id="Entitylist" align="center" &gt;
              &lt;table class="table1"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Id&lt;/th&gt;&lt;th&gt;FirstName&lt;/th&gt;&lt;th&gt;LastName&lt;/th&gt;&lt;th&gt;AgencyName&lt;/th&gt;&lt;th&gt;is Active&lt;/th&gt;&lt;th&gt;Edit&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;c:forEach items="${introducerList}" var="i"&gt;
                      &lt;tr&gt;
                          &lt;td &gt;${i.id}&lt;/td&gt;
                          &lt;td &gt;${i.firstName}&lt;/td&gt;
                          &lt;td &gt;${i.lastName}&lt;/td&gt;
                          &lt;td&gt;${i.agencyName}&lt;/td&gt;
                          &lt;td &gt;${i.active}&lt;/td&gt;
                          &lt;td &gt;&lt;a href="editIntroducer?eitdcid=${i.id}"&gt;Edit&lt;/a&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/c:forEach&gt;
              &lt;/table&gt;
          &lt;/div&gt; 
  
        &lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;/td&gt;
  
       &lt;/tr&gt;
  
      &lt;/table&gt;
  
      &lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;/table&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="${pageContext.request.contextPath}/resources/js/example1.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <h1>axample1.js</h1>
  
  <pre><code>    function getCategoryForSelectedProduct(){
          $('#loading').html('&lt;img src="./resources/img/ajax-loader.gif"&gt;');
              $.ajax({
                  url : 'dropdown/getCategoryForSelectedProduct',
                  method : 'post',
                  ContentType : 'json',
                  data : {
                      productName : $('#product').val()
                  },
  
                  success : function(response) {
                      var options = '';
                      if (response != null) {
                          $(response).each(function(index, value) {
                              options = options + '&lt;option&gt;' + value + '&lt;/option&gt;';
                          });
                          $('#category').html(options);
                      }
                      $('#loading').html('');
                  },
  
                  error : function(e) {
                      console.log("ERROR: ", e);
                      display(e);
                  },
              });
          }
  </code></pre>
  
  <h1>Screenshot of library</h1>
  
  <pre><code>[Reference Libraries-1][2]
  [Reference Libraries-2][3]
  [Reference Libraries-3][4]
  [Reference Libraries-4][5]
  
  
  
    [1]: https://github.com/shivam091/Spring-MVC-AJAX-Integration/archive/master.zip
    [2]: https://i.stack.imgur.com/uVGzy.png
    [3]: https://i.stack.imgur.com/siSOU.png
    [4]: https://i.stack.imgur.com/DQJ0j.png
    [5]: https://i.stack.imgur.com/yFB8H.png
  </code></pre>