在Spring MVC中使用jQuery进行URL映射

Question

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>

Answer 1

When use <input type="submit" ..... /> it will submit your form according to your form action url. eg something.html

So change the and add a click listener.

<input type="button" onclick="_submit()"/>

and your js would be

function _submit(){
    // submit your form via ajax.
}

This should submit your form with your specified url.

Thanks.