JS 常用方法汇总
0. js 初始化加载方法
$(function () {
beforeInit();
init();
});
function beforeInit(){
// TODO
}
function init(){
// TODO
}
1. Ajax 请求发送与接受
function init() {
// 请求接口时前端加载 loading,调用接口方法第一行:
loadingMsg.startLoading('加载中...');
var params = {
'name': 'test',
'id': '12345',
};
var param = {params: JSON.stringify(params)};
$.post('/XXX', param, function (result) { // 返回结果为 result
// 调用返回后结束 loading:
loadingMsg.hideLoading();
if (result == '0000') { // 判断根据后台返回结果的格式而定
// TODO
} else {
alert(json.MSG);
}
});
}
后台接收:
@RequestMapping("/XXX")
@ResponseBody
public String demo(HttpServletRequest request, String params){
JSONObject paramsJson = JSONObject.parseObject(params);
if(StringUtil.isEmptyObject(paramsJson)){
paramsJson = new JSONObject();
}
// TODO
return "/XXXXX"; // 返回跳转 URL。可以设置结果为 json 字符串,在前端解析 json;
}
2. 设置html内容
// getElementsByClassName 不行
document.getElementById('targetId').innerHTML = returnRes + '元';
3. 缓存---实现跨页面读取参数;尽量少用,敏感信息不落地;
// 设置缓存
localStorage.setItem('itemName', itemValue);
// 读取缓存
localStorage.getItem('itemName');
4. 设置全局变量的内部值
var info = {};
info = result; // 将接口返回结果赋给全局变量 info,后续方法调用
info.flag = '0'; // 添加新的值至全局变量中 info 内容为:{flag: "0"}
5. 判断
// 利用 JSON 判断对象内容
JSON.stringify(result) === '{}'
// 判断对象的类型
if(typeof result === 'undify'){
// TODO
}
6. 链接跳转
window.location.href = '/XXX'; // 跳转后台或页面
7. jQuery 获取某个 id 中的值
$('#myInput').val()
8. jQuery 设置某个 id 中的值
$('#myInput').html(phoneNumber);
9. js 字符串截取与拼接
var tel = '15021932016';
var mtel = tel.substr(0, 3) + '****' + tel.substr(7); // 手机号码脱敏
substr(start); // 从 start 位开始(含 start 位)截取到最后,tel.substr(7) 输出 '2016'
substr(start, end); // 截取范围含左不含右,tel.substr(0, 3) 输出 '150'
10. 返回上一页
history.go(-1);
11. 点击事件改变指定对象的 css 样式。removeClass(), addClass()
$('#deleteNum').on('click', (function () {
var _this2 = $('#deleteNum');
if (_this2.hasClass('delNumDisplay')) {
_this2.removeClass('delNumDisplay');
_this2.addClass('delNum');
}
}));
12. 点击发送短信校验码 逻辑
html:
<button id='getPhoneNum' class="SecurityCode">获取验证码</button>
js:
$('.SecurityCode').on('click', (function () {
sendemail()
}));
var countdown = 60;
function sendemail() {
var obj = $("#getPhoneNum");
var params = {
'transType': 'XXXXXX', // 发送短信后台接口
'Reqno': new Date().getTime(),
'mobile': phoneNumber,
};
var param = {params: JSON.stringify(params)};
$.post('/wx/dyb/callAppGateWay', param, function (result) {
var json = eval('(' + result + ')');
if (json.RESULT == '0000') {
settime(obj);
} else {
alert(json.MSG);
}
});
}
//发送验证码倒计时
function settime(obj) {
if (countdown == 0) {
// 设置按键有效
obj.attr('disabled', false);
// 修改样式
obj.removeClass('SecurityCodeSend');
obj.addClass('SecurityCode');
obj.html("获取验证码");
countdown = 60;
return;
} else {
// 设置按键失效
obj.attr('disabled', true);
// 修改样式
obj.removeClass('SecurityCode');
obj.addClass('SecurityCodeSend');
obj.html(countdown + "秒后重新发送");
countdown--;
}
setTimeout(function () {
settime(obj)
}, 1000)
}
13. 获取当前日期 yyyymmdd
function getNowFormatDate() {
var day = new Date();
var Year = 0;
var Month = 0;
var Day = 0;
var CurrentDate = "";
Year = day.getFullYear();//支持IE和火狐浏览器.
Month = day.getMonth() + 1;
Day = day.getDate();
CurrentDate += Year;
if (Month >= 10) {
CurrentDate += Month;
}
else {
CurrentDate += "0" + Month;
}
if (Day >= 10) {
CurrentDate += Day;
}
else {
CurrentDate += "0" + Day;
}
return CurrentDate;
}
14. spring boot 后端传值
controller:
model.addAttribute("code", code);
html:
var code = '[[${code}]]';
15. 限制重复点击事件
// 点击限制,on('click', (function (){ // TODO })) 之前添加 off('click') 属性;
$('#sureButton').off('click').on('click', (function () {
signElec();
}));
或
$('#sureButton').attr('disabled', true); // 点击之后添加 disabled 属性
16. 实时监测验证码
$(function () {
$('.yzminput').bind('input propertychange', function () {
// TODO
});
});
17. 多种条件限制,改变最终按键的样式
// 是否勾选同意协议
var isAgree = 0;
// 监听事件,触发确认框生效。onkeyup onclick
document.onkeyup = function () {
document.onclick = function () {
var $checkbox = $('.checkbox');
var _this = $(this).find($checkbox);
if (_this.hasClass('read')) {
isAgree = 1;
} else {
isAgree = 0;
}
};
// 输入金额限制
var inputNum = $('#clvalNum').val();
// 短信验证码的长度
var yzm = $('.yzminput').val();
// 判断三个条件是否满足
if (inputNum >= 100 && isAgree==1 && yzm.length == 6) {
// 改变提交按键的样式
$('#sureButton').removeClass('sureBtn');
$('#sureButton').addClass('sureBtnSubmit');
} else {
$('#sureButton').removeClass('sureBtnSubmit');
$('#sureButton').addClass('sureBtn');
}
};
18. 监听事件,触发确认框生效
function commonMonitor() {
// 监听验证码
var yzm = $('.yzminput').val();
if (yzm.length == 6) {
$('#sureButton').removeClass('sureBtn');
$('#sureButton').addClass('sureBtnSubmit');
} else {
$('#sureButton').removeClass('sureBtnSubmit');
$('#sureButton').addClass('sureBtn');
$('#sureButton').off('click');
}
}
// 注:js绑定事件,解绑事件,以 id 为准