博客

使用ajax向后台传递参数，使用参数绑定的方式笔记：

第一种，使用@RequestParam逐个对应接收：

    js代码：

        var url = "/rest/register";
	var phoneNo = $("#mobile").val();
	var nickname=$("#nickname").val();
	var password = $("#signPwd").val();
	var code = $('#mobileValidateCode').val();
	//判断注册角色(默认为投资人角色)
	var role=2;
	var rs = null;
	$(".reg-items :input").attr("disabled", true);
	$.ajax({
		data:({
			"phoneNo" : phoneNo,
			"nickname" : nickname,
			"password" : password,
			"role" : role,
			"code":code,
			"spreadCode": $("#spreadCode").val()
		}),
		url:url,
		type:"POST",
		dataType:"json",
		cache : false,
		success:function(data){

               }
      });

   后台代码：

 @RequestMapping(value = "register", method = RequestMethod.POST)
    public CommonResult<String> register(
            @RequestParam("phoneNo") String phoneNo,
            @RequestParam("nickname") String nickname,
            @RequestParam("password") String password,
            @RequestParam("role") int role, @RequestParam("code") String code,
            @RequestParam(required = false, value="spreadCode") String spreadCode,
            HttpServletRequest request)

 此种方法使用起来简单直接，不宜出错，缺点也很明显，方法的参数列表过长。

第二种：使用@ModelAttribut进行参数绑定

   html代码：

<form id="ybdForm">
	        <ul class="login-items">
	            <li>
	            	<div class="input-div">姓名</div>
	                <input type="text" id="userName" name="userName" class="input" placeholder="请输入姓名">
	                <div class="error" id="userNameError"></div>
	            </li>
	            <li>
	            	<div class="input-div">昵称</div>
	                <input type="text" id="nickName" name="nickName" class="input" placeholder="请输入昵称">
	                <div class="error" id="nickNameError"></div>
	            </li>
	            <li>
	            	<div class="input-div">手机号码</div>
	                <input type="text" id="phone" name="phone" class="input" placeholder="请输入手机号码">
	            	<div class="error" id="phoneError"></div>
	            </li>
	            <li>
	            	<div class="input-div">身份证号码</div>
	                <input type="text" id="idCard" name="idCard" class="input" placeholder="请输入身份证号码">
	                <div class="error" id="idCardError"></div>
	            </li>
	            <li>
	            	<div class="input-div">贷款金额</div>
	                <input type="text" name="loanAmount" id="loanAmount" class="input" placeholder="请输入贷款金额">
	            	<div class="error" id="loanAmountError"></div>
	            </li>
	            <li>
	            	<div class="input-div">图片验证码</div>
	                <input type="text" name="imgCode" id="imgCode" class="input" placeholder="请输入图片验证码">
	                <div class="authImage">
	                	<a href="javascript:refreshImageCode();">
	                		<img id="imageCode" alt="" src="/authImage" style="height: 45px;"/>
	                	</a>
	                </div>
	                <div class="codeTime">
	                	<a href="javascript:refreshImageCode();">看不清，换一张</a>
	                </div>
	                <div class="error" id="imgCodeError"></div>
	            </li>
	            <li>
	            	<div class="input-div">手机验证码</div>
	                <input type="text" name="smsCode" id="smsCode" class="input" placeholder="请输入手机验证码">
	                <div class="sms-code">
	                	<a href="javascript:sendVerifycodeByMobile();" class="r3 getVerifyType getVerify-Valid" id="msgCode">短信获取</a>
	                </div>
	                <div class="codeTime" id="phoneCode" style="display: none;">
	                	60秒后重新获取
	                </div>
	                <div class="error" id="smsCodeError"></div>
	            </li>
	        </ul>
        	<div class="login-area">
		        <div class="login-button">
		            <div class="loginAnNiu" οnclick="Loan();"></div>
		        </div>
		        <div class="login-server"> 
		        	<font>已有帐号？</font>
		        	<a href="/login/login.html" style="text-decoration: none;"><font class="mimaFont">请登录</font></a>
		        </div>
	        </div>
	        </form>

 
    js代码：

$.ajax({
			type:"POST",
			data:$('#ybdForm').serialize(),
			url:"/rest/applyLoan",
			cache : false,
			success:function(result){}
});

    java代码：

@RequestMapping(value="applyLoan",method=RequestMethod.POST)
	public CommonResult<Map<String, String>> applyLoan(
			@ModelAttribute ApplyView apply, HttpServletRequest request) {}

 使用参数绑定，避免了后台重新初始化对象所带来的冗余代码，需要着重提醒的是：ApplyView接收对象中的属性名必须与form表单中需要提交的<input>标签或其他标签的name属性完全对应

第三种：使用@RequestBody进行参数绑定（以传递数组为例）

    js代码：

var waitRegistArray = [];
	$(":checkbox[name=checkboxBtn][checked=checked]").each(function(){
			var regist = waitRegist[$(this).val()];
			var  data={"name":regist.name,"phoneNo":regist.phoneNo,"cardNo":regist.cardNo};  
				waitRegistArray.push(data);
			});
			$.ajax({
				url:"rest/batchRegist",
				data:JSON.stringify(waitRegistArray),
				contentType:"application/json",        
				type:"POST",
				dataType:"json",
				async: false,
				cache:false,
				success:function(result){}
})

   java代码：

@RequestMapping(value="batchRegist",method=RequestMethod.POST)
	public CommonResult<String> batchRegist(@RequestBody List<User> users){}

 json数组以List集合方式接收，其中User对象属性与数组中的对象属性名对应！