This somewhat confusing but it is my project requirement. I am using spring mvc and jquery. Now I have to post the form and expose the data to back end using ajax call of jquery for this my jquery is
home='<%=request.getContextPath()%>'; $('#userReg').submit(function(event){ var add = {} add["type"] = $("#type").val(); add["name"] = $("#companyName").val(); add["regNumber"] = $("#regNumber").val(); add["dob"] = $("#dob").val(); add["email"] = $("#email").val(); add["password"] = $("#password").val(); add["confirmPassword"] = $("#cpassword").val(); add["line1"] = $("#line1").val(); add["line2"] = $("#line2").val(); add["state"] = $("#state").val(); add["country"] = $("#country").val(); add["zipCode"] = $("#zipCode").val(); console.log("search: ", add); event.preventDefault(); $.ajax({ type : "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, url : home+"/addCompany", data : JSON.stringify(add), dataType : 'json', timeout : 100000, success : function(data) { console.log("SUCCESS: ", data); alert(data) }, error : function(e) { console.log("ERROR: ", e); alert(e); },done : function(e) { console.log("DONE"); } }); }); and corresponding method
@RequestMapping(value="/addCompany",method=RequestMethod.POST,consumes=MediaType.APPLICATION_JSON_VALUE) public@ResponseBody String userLogin(HttpServletRequest req,@RequestBody CompanyRegVO user){ logger.debug("signUp user:"+user); // get reCAPTCHA request param String gRecaptchaResponse = req.getParameter("g-recaptcha-response"); boolean isVerified= Verify.verifyGcaptchResponse(gRecaptchaResponse); ObjectMapper mapper=new ObjectMapper(); String jsonString=""; System.out.println("signUp user:"+user); Integer id=null; try{ if(isVerified){ id = signupHandler.process(user); if(id!=null){ logger.debug("ID in controller:"+id); emailHandler.sendVerificationMail(id,user.getEmail()); System.out.println("user create successfully"); } jsonString=mapper.writeValueAsString("User creaated successfully"); } else jsonString= mapper.writeValueAsString("please verify that you are not a robot"); } catch (JsonGenerationException e) { e.printStackTrace(); } catch (JsonMappingException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (Exception e) { try { jsonString=mapper.writeValueAsString(e.getMessage()); } catch (JsonProcessingException e1) { } return jsonString; } return "success"; } Now my form is mapped with this URL
@RequestMapping(value="/signUp",method=RequestMethod.GET) public String register(Model model){ CompanyRegVO user=new CompanyRegVO(); model.addAttribute("userForm", user); return "signUp"; } When I submit my form I expected that my jquery code will execute will invoke my upper one method but it inovkes above get method and return me signUp page with my data as query parameter. Now if I comment mapping for "/signUp" my server is giving 404 error. since page is mapped to that URL. So any one can please tell what is remedy for this kind of situation jquery or spring??
Edit 1: below is my form
<form class="form-horizontal" name="userReg" id="userReg"> <div class="form-group"> <label class="col-sm-2 control-label">Company Name</label> <div class="col-sm-4"> <input name="companyName" type="text" class="form-control" id="companyName" placeholder="Name" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Registration number</label> <div class="col-sm-4"> <input name="RegNumber" type="number" required="required" class="form-control" id="regNumber" placeholder="Registration number" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Address line 1</label> <div class="col-sm-4"> <input name="line1" type="text" required="required" class="form-control" id="line1" placeholder="line1" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Address line 2</label> <div class="col-sm-4"> <input name="line2" type="text" class="form-control" id="line2" placeholder="line2" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Zip code</label> <div class="col-sm-4"> <input name="zipCode" type="number" required="required" class="form-control" id="zipCode" placeholder="zip code" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">State</label> <div class="col-sm-4"> <input name="state" type="text" required="required" class="form-control" id="state" placeholder="State" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Country</label> <div class="col-sm-4"> <input name="country" type="text" required="required" class="form-control" id="country" placeholder="country" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-4"> <input name="email" type="email" class="form-control" id="email" placeholder="Email" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Date of Birth(dd-mm-yyyy)</label> <div class="col-sm-4"> <input name="dob" type="text" class="form-control" id="dob" placeholder="Date of birth" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-4"> <input name="password" id="password" maxlength="12" pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,12})" required="required" type="password" class="form-control" id="password" placeholder="password" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Confirm Password</label> <div class="col-sm-4"> <input name="confirmPassword" id="cpassword" maxlength="12" required="required" type="password" class="form-control" id="cpassword" placeholder="confirm password" /> <span id='message'></span> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">User type</label> <div class="col-sm-4"> <select class="form-control" id="type" name="type" > <option selected="selected">--select--</option> <option value="user" >CEO</option> <option value="admin">HR</option> </select> </div> </div> <br> <div class="form-group"> <div class="g-recaptcha" data-sitekey="my-public key"></div> </div> <br> <div class="col-md-6 center-block"> <input type="submit" class="btn-lg btn-primary center-block" value="save"> </div> </form>
<input type="button" ..../>and add anonclick eventListenerto that button. inside the function [invoked from button click] you call your ajax function. let me know what happens.