jQuery中$()代表一个jQuery对象。jQuery中没有this,DOM中有this,$(this) 是把 DOM对象封装成jQuery对象;
我再工作中写页面时遇到了一个需求:当一个输入框输入完银行卡后,触发失去焦点事件,然后发送ajax请求到后台服务器,根据输入的银行卡号,查询该银行卡的卡类型并找出对应的银行图片,然后显示在输入框的后面的功能;
<div class="l"><span>银行卡号:</span></div>
<div class="r">
<input type="text" autocomplete="off" class="form-input w1 wid250" id="cardNum" name="bankCardNo" onkeyup="this.value=this.value.replace(/\D/g,'')" datatype="*10-30" nullmsg="请输入银行卡号" errormsg="请填写正确的银行卡号" maxLength = "28">
<img class="middle" src="" id="cardImg" style="display:none;height:27px;">
<span id="cardMeg" ></span>
</div>
对应的js:
$("input[name='bankCardNo']").blur(function(){
if($(this).val()){// 判断是否输入了值,如果输入了,就调用写好的bankType函数
bankType(contextRoot);
}else{
$("#cardImg + span").show();
$("#cardImg").hide();
}
});
bankType函数如下:
function bankType(contextRoot){
var bankCard = $("input[name='bankCardNo']").val();
var cardId=$("#cardNum").val().substr(this.length-5);//目的截取银行卡号后5位 (下标从1开始)
$.ajax({
type : 'post',
url : contextRoot + "/quickpay/bankType",
data : {'bankCard':bankCard},
success : function(data){
//alert(data);
var d = eval("("+data+")");
if(d.retCode == "0000"){
if(d.cardattr == "02"){
$("#cvvExpireDate").show();
$("input[name='cvv']").attr({"datatype":"n3-3","nullmsg":"请输入有效数字!","errormsg":"请输入3位有效数字!"});
$("input[name='expireDate']").attr({"datatype":"n4-4","nullmsg":"请输入有效期!","errormsg":"请输入4位有效数字!"});
}else{
$("#cvvExpireDate").hide();
$("input[name='cvv']").removeAttr("datatype").removeAttr("nullmsg").removeAttr("errormsg");
$("input[name='expireDate']").removeAttr("datatype").removeAttr("nullmsg").removeAttr("errormsg");
}
//$('#cardNum').after('<br />')
//$('#cardNum').css({'margin-bottom':'10px'});
$("#cardImg").show().attr('src',contextRoot + "/static/images/common/banks/"+d.bankCode+".png");
$("#cardImg + span").hide();
$("#cardImg").next('span').removeClass('Validform_wrong');
$("#cardMeg").text(d.bankType+"**"+cardId).show();
$("#cardMeg + span").hide();
}else{
$("#cardImg").hide();
$("#cardMeg").hide();
if($("#showMsg").text()=="无法识别银行卡信息"){$("#showMsg").text("")};
//$("input[name='bankCardNo'] ~ span").show().addClass('Validform_wrong').text(d.retMsg);
$('#cardMeg').next().show().addClass('Validform_wrong').text(d.retMsg);
}
}
});
}
后台对应的方法:
/**
* 通过银行卡号获取卡信息
* @param bankCard
* @param model
* @param request
* @return
*/
@RequestMapping(value = "/bankType")
@ResponseBody
public String bankType(@RequestParam(value = "bankCard") String bankCard,Model model,HttpServletRequest request){
try {
FsbBankCardBin cardBin = finaneCommonService.getBankCardBin(bankCard.replaceAll("\\s", ""));
if(cardBin == null){
return returnErrMsg(AgentRetInfo.ILLEGAL_ARGUMENT.getValue(), "无法识别银行卡信息");
}
//return returnErrMsg("0000", cardBin.getCardattr());
Map<String, String> resultMap = new HashMap<String, String> ();
resultMap.put("retCode", "0000");
resultMap.put("cardattr", cardBin.getCardattr());
resultMap.put("bankCode", cardBin.getBankId());
resultMap.put("bankType", cardBin.getCardType());
return GateWayAgecPayUtil.resultJsonStr(resultMap);
} catch (Exception e) {
return returnErrMsg("9999", "系统异常");
}
}