title: Not able to use ajax in spring mvc form
body: <p>I am trying to implement ajax based post in form in spring mvc. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;form:form method="POST" commandName="emailDomain"&gt;
      &lt;form:textarea path="emailText" rows="5" id="emailList"
          placeholder="Write emails to submit us, saperated by ';'"
          style="width: 100%" /&gt;
  
  &lt;form:select items="${categoryMap}" path="categoryId" id="categoryList"
      onchange="showEmails()" /&gt;
  
      &lt;br /&gt;
      &lt;p align="center"&gt;
          &lt;button type="button" value="Submit" id="submitEmails"&gt;Submit emails&lt;/button&gt;
      &lt;/p&gt;
      &lt;p align="center" class="text-info"&gt;${var}&lt;/p&gt;
  &lt;/form:form&gt;
  </code></pre>
  
  <p>My ajax code is:</p>
  
  <pre><code>&lt;script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"&gt;&lt;/script&gt;
  
       &lt;script type="text/javascript"&gt;
       function showEmails() {
  
              var categoryId = $('#categoryList').val();
      var emailText = $('#emailList').val();
  
      $.ajax({
          type : "POST",
          url : "http://localhost:8081/chatbooster/forms/email.html?cat=1",
                  data : "categoryId=" + categoryId + "&amp;emailText=" + emailText,
          success : function(response) {
  
  
          },
          error:function (xhRequest, ErrorText, thrownError) {
              alert('Error: '  + '  ' + thrownError);
          }
      });
  }
  </code></pre>
  
  <p></p>
  
  <p>The problem is after clicking the button, it shows error as alert but with out any explanation. And after that it is jumping to page showing json response. The code would work if I do not use spring form tag at all. It will show no error and wont show json response but again, I will not able to populate select dropdown from database. </p>
  
  <p>My controller is:</p>
  
  <pre><code>@Controller
    @RequestMapping(value = "/email.html")
    public class EmailController{
  
      @RequestMapping(method = RequestMethod.GET)
        public String showForm(Model model,
            @RequestParam(value = "cat", required = true) String category,
            HttpServletRequest request, HttpServletResponse response) {
          clearSession(request, response);
  
          return "email";
        }
  
      @RequestMapping(value = "/submitemails", method = RequestMethod.GET)
        public @ResponseBody
        String submitAndRefreshEmails() {
          System.out.println("check");
  
          return "email";
        }
  
      @RequestMapping(method = RequestMethod.POST)
        public @ResponseBody
        EmailJsonResponse addEmail(@Valid EmailDomain emailDomain,
            BindingResult result,
            @RequestParam(value = "cat", required = true) String category,
            HttpServletRequest request, HttpServletResponse response)
        throws Exception {
  
          //return emailjsonresponse object, a simple object carrying few ints and strings
  
        }
  
      @ModelAttribute("categoryMap")
        public Map&lt;Long, String&gt; populateCategoryList(
            @RequestParam(value = "cat", required = true) String category)
        throws Exception {
  
          // populating drop down 
  
        }
  
    }
  </code></pre>
  
  <p>I have read many discussion about this but I am not able to get how to make it situation like this? Can anyone please help me out here? I am referring this example <a href="http://www.javacodegeeks.com/2012/02/spring-mvc-and-jquery-for-ajax-form.html" rel="nofollow">http://www.javacodegeeks.com/2012/02/spring-mvc-and-jquery-for-ajax-form.html</a></p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>I have even tried this new one:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $('#submitEmails').onclick(function() {
            $.getJSON('http://localhost:8081/chatbooster/forms/submitemails.html?cat=1',
                  {
                      categoryId : $('#categoryList').val(),
                      emailText : $('#emailList').val(),
                      ajax : 'true'
                  }, 
                  function(data) {
                      alert('data found');
                  }
            );
        });
    });
  </code></pre>
  
  <p></p>
  
  <p>But still I am being shown json response. I am not able to understand why it is happening? I tried out this <a href="http://rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/" rel="nofollow">http://rockhoppertech.com/blog/spring-mvc-3-cascading-selects-using-jquery/</a>. I am able to implement ajax when I don't use spring form component. But that will cause trouble to me for populating drop down element from database. There is something that I am missing. Any ideas what it can be ?  </p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>Now I understand what is the cause of this issue. It is that I am submitting the form which is eventually leading to me to json response. What I need to do is to call jquery function from the button, making submit button of button type rather than submit type. Clicking on that would call method related to GET request type of the controller. But for that I need to call submitAndRefreshEmails method on clicking submit button. Can anyone please tell me how to go for that? How to call a particular method of GET type when there are many such type of methods in a controller?</p>