一尘不染

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

spring-mvc

这有点令人困惑,但这是我的项目要求。我正在使用spring
mvc和jquery。现在,我必须发布表单,并使用jquery的ajax调用将数据公开到后端,因为我的jquery是

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");
        }
});
});

和相应的方法

 @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";

   }

现在,我的表单已与此URL映射

@RequestMapping(value="/signUp",method=RequestMethod.GET)
   public String register(Model model){
    CompanyRegVO user=new CompanyRegVO();
    model.addAttribute("userForm", user);
    return "signUp";
   }

当我提交表单时,我希望我的jquery代码将执行,将调用我的上一个方法,但它会调用get方法上方,并以我的数据作为查询参数返回signUp页面。现在,如果我评论“
/ signUp”的映射,我的服务器将显示404错误。因为页面已映射到该URL。那么任何人都可以告诉我这种情况jquery或spring的补救方法是什么?

编辑1:下面是我的表格

<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>

阅读 235

收藏
2020-06-01

共1个答案

一尘不染

使用时<input type="submit" ..... />,它将根据您的form操作网址提交您的表单。例如something.html

因此,更改并添加一个点击监听器。

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

而你js

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

这应该使用您指定的网址提交表单。

谢谢。

2020-06-01