1.根据公司项目封装ajax请求,结合layer框架一起使用

/*提取接口公共部分*/
var ApiConf = {
server:"http://localhost:8080/Battery/",
}; /**
* 调用接口方法
* api:接口
* callback:回调函数
* info:参数
* type:请求方式
*/
function WFang (api, callback, info , type){
//加载动画
layer.load();
//参数
var data = info;
var contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
if(type == 'post'){
contentType = 'application/json';
}else if(type == 'get'){
contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
}
if (typeof(data) === 'undefined') {
layer.msg("提交的参数缺失", "出现错误了哦:");
return;
}
window.ajax_request = $.ajax({
type: type,
dataType: 'json',
async: 'false',
xhrFields: {
withCredentials: true
},
crossDomain: true,
url: ApiConf.server+api,
data: info,
success: function(data) {
//停止加载动画
layer.closeAll('loading');
if (data.status) {
callback(data);
}
else if (data.status==false){
callback(data);
}
},
error: function(XMLHttpRequest) {
layer.msg('服务器遇到了问题哦,请联系客服~~~');
},
complete: function(XMLHttpRequest, textStatus){
window.ajax_request = null;
},
contentType:contentType
//contentType:'application/x-www-form-urlencoded; charset=UTF-8'
});
} /**
* 接口方法使用示例
* 登录(包含cookie存储)
*/
function user_login(userName,password){
WFang ("user/userLogin",function(arr){
var yCode = $('.yCode').val().trim().toUpperCase();
var code = $('.yzm').html();
if(arr.status == false){
layer.msg(arr.message);
}else{
if ($("#remid").is(':checked') == true) {
var username = $('#uname').val().trim();
var password = $('#upwd').val().trim();
$.cookie("rmbUser", "true", { expires: 30 }); //存储一个带30天期限的cookie
$.cookie("username", userName, { expires: 30 });
$.cookie("password", password, { expires: 30 });
}
else {
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
}
var jumpto ="index.html";
window.location.replace(jumpto);
window.sessionStorage.setItem(UrlConf.tk_rolename,arr.data.realName.trim());
window.sessionStorage.setItem(UrlConf.tk_uid,arr.data.userId.trim());
window.sessionStorage.setItem(UrlConf.tk_uPhone,arr.data.phone.trim());
}
},{userName:userName,password:password}
)
};
/**
* 接口方法使用示例
* 注销
*/
function logout() {
WFang ("user/loginOut",function(arr){
if(arr.status){
// TODO clear all cookies
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
layer.msg("退出登录");
setTimeout("window.location.href='login.html'",1000);
}
},{},'get');
}

2.生成验证码

/**
* 生成验证码方法
* 可用于登录页面生成验证码
*/
function createCode(){
var code = "";
var codeLength = 4;//验证码的长度
var random = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
'S','T','U','V','W','X','Y','Z'];//随机数
for( var i = 0; i < codeLength; i++ ) {//循环操作
var index = Math.floor(Math.random()*26);//取得随机数的索引(0~35)
code += random[index];//根据索引取得随机数加到code上
}
$('.yzm').html(code);//把code值赋给验证码
}

3.时间戳转日起对象

/**
* 时间戳转换成日期对象
*/
function getLocalTime(nS) {
return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}

4.截取url参数

/**
* 截取url参数
* 用于截取页面之间传递的参数
*/
function getUrl(){
var search = location.search;
var params = {};
if(params != ''){
var ps = search.slice(1).split('&');
for(var i = 0;i < ps.length;i++){
var arr = ps[i].split('=');
params[arr[0]] = arr[1];
}
}
return params;
}

5.去除前后空格

/**
* 去除前后空格
* 前端传给后台的参数需去除前后空格
*/
function Trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}

6.获得字符串长度

/**
* 获得字符串长度
* 可用于表单输入长度验证
*/
function getLen(str){
var len = 0;
for(var i = 0;i < str.length;i++){
if(str.charCodeAt(i)>255){//charCodeAt() 方法可返回指定位置的字符的 Unicode 编码
len += 2;
}else{
len++;
}
}
return len;
}

7.图片压缩上传

/**
* 图片压缩上传
* 上传前用js对图片压缩,把利用canvas生成的base64字符串,传入后台,
* (无所谓ajax或者form,同时也可以解决图片无刷新上传),
* 在Java后台将获取到的base64字符串输出为图片,即可。
*/
function caseUploadFile(files, callback) {
var fd = new FormData();
fd.append("fileCommon.fileSource", "lists");
fd.append("fileCommon.fileType", "JPG,BMP,GIF,TIF,PNG");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);
//画图
var img = new Image();
img.src = blob;
img.onload = function() {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = 640 || w;
h = w / scale; //生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({
width: w,
height: h
});
ctx.drawImage(that, 0, 0, w, h);
/**
* 生成base64
* 兼容修复移动设备需要引入mobileBUGFix.js
*/
var base64 = canvas.toDataURL('image/jpeg', 0.8 || 0.8); // 修复IOS
if (navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(img);
mpImg.render(canvas, {
maxWidth: w,
maxHeight: h,
quality: obj.quality || 0.8
});
base64 = canvas.toDataURL('image/jpeg', 0.8 || 0.8);
} // 修复android
if (navigator.userAgent.match(/Android/i)) {
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, w, h), 0.8 * 100 || 80);
}
imgData = base64;
fd.append("files.filess", files[0]);
};
}
var xhr = new XMLHttpRequest();
if (typeof(callback) === 'function') {
xhr.addEventListener("load", function (evt) {
Toast(null, null, null, 3);
callback(evt);
}, false);
}
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", ApiConf.server + ApiConf.case_upload_img);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(fd);
}

8.文件上传

/*文件上传(待续)*/
function uploadFile(){
var that=this;//保存当前this
var file = that.files[0];
var fd = new FormData();
fd.append("file", file);
fd.append("fileDesc", "test");
layer.load(0);
$.ajax({
async: true,
url: ApiConf+'Resource/ResourceAdd',
type: "POST",
dataType: 'json',
data: fd,
contentType: false,
beforeSend: function (xhr) {
xhr.setRequestHeader("authorization", token);
},
xhr: function() {
myXhr = $.ajaxSettings.xhr();
return myXhr;
},
success:function(arr) {
//头像id
that.setAttribute('name',arr.data[0].resourceid);
layer.msg('文件上传成功',{icon: 1});
layer.closeAll('loading');
},
error:function() {
layer.msg("上传失败");
},
cache:false,
processData:false
});
}

9.全选/全不选

/*
* 全选/全不选
*/
function selectAll(objSelect) {
if (objSelect.checked == true) {
$("input[name='chkId']").attr("checked", true);
$("input[name='chkAll']").attr("checked", true);
}
else if (objSelect.checked == false) {
$("input[name='chkId']").attr("checked", false);
$("input[name='chkAll']").attr("checked", false);
}
}

10.判断两个日期大小

/*
* 判断两个日期大小
* 得到日期值并转化成日期格式,replace(/\-/g, "\/")是根据验证表达式把日期转化成长日期格式,这样再进行判断就好判断了
*/
function ValidateDate() {
var beginDate = $("#t_datestart").val();
var endDate = $("#t_dateend").val();
if (beginDate.length > 0 && endDate.length>0) {
var sDate = new Date(beginDate.replace(/\-/g, "\/"));
var eDate= new Date(endDate.replace(/\-/g, "\/"));
if (sDate > eDate) {
alert('开始日期要小于结束日期');
return false;
}
}
}

11.回车提交

/*
* 回车提交
*/
$("id").onkeypress = function (event) {
event = (event) ? event : ((window.event) ? window.event : "")
keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
if (keyCode == 13) {
$("SubmitLogin").onclick();
}
}

12.获得当前时间

/*
* 获得当前时间
*/
function checkTime(i){
if(i<10){
i="0"+i;
}
return i;
}
function showTime(){
var date=$("#spanData");
var mydate=new Date;
var y=mydate.getFullYear();
var m=mydate.getMonth()+1;
var d=mydate.getDate();
var w=mydate.getDay();
var h=mydate.getHours();
var f=mydate.getMinutes();
var s=mydate.getSeconds();
f=checkTime(f);
s=checkTime(s);
var week="";
var week=['星期日','星期一','星期二','星期三 ','星期四','星期五','星期六'];
date.html(y+"年"+m+"月"+d+"日"+" "+week[w]+" "+h+":"+f+":"+s);
setTimeout(showTime,1000);
}

13.验证邮箱的格式

var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;

常用JavaScript代码库(又名:WFang.js)的更多相关文章

  1. 网页制作中最有用的免费Ajax和JavaScript代码库

    网上看到的一篇小文,挺有用的,收藏在这. 本文中,我整理了12个免费的Ajax和JavaScript代码库,可以帮助Web开发人员将应用程序提升到一个新水平. Ajax Instant Messeng ...

  2. 73种网页常用Javascript代码

    73种网页常用Javascript代码 转载自:前端丶灵魂工程师   1.后退 前进  <input type="button" value="后退" o ...

  3. JS - 常用效果代码库 (四)

    1.首字母大写示例: var value = “一段文本或一个参数”; value = value.toString() return value.charAt(0).toUpperCase() + ...

  4. [总结]web前端常用JavaScript代码段及知识点集锦

    DOM相关 判断浏览器是否支持placeholder属性 function placeholderSupport() { return 'placeholder' in document.create ...

  5. WEB前端常用JavaScript代码整理

    文章目录 html代码用JS动态加载进页面 JS判断用户访问的是PC还是mobile或者微信浏览器 判断浏览器的简单有效方法 点击某个div区域之外,隐藏该div 如何在手机上禁止浏览器的网页滚动 改 ...

  6. 移动端初始化常用JavaScript代码

    移动端常用js分享 1.把手机屏幕等分10分(我用的是这种形式),用rem来计算那些需要自适应. <script type="text/javascript"> (fu ...

  7. 常用javascript代码片段集锦

    常用方法的封装 根据类名获取DOM元素 var $$ = function (className, element) { if (document.getElementsByClassName) { ...

  8. 分享实用的JavaScript代码库

    1 var keyCodeMap = { 2 8: 'Backspace', 3 9: 'Tab', 4 13: 'Enter', 5 16: 'Shift', 6 17: 'Ctrl', 7 18: ...

  9. 【JavaScript代码实现三】JS对象的深度克隆

    function clone(Obj) { var buf; if (Obj instanceof Array) { buf = []; // 创建一个空的数组 var i = Obj.length; ...

随机推荐

  1. 【存储过程】MySQL存储过程/存储过程与自定义函数的区别

    ---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer = {user|current_user ...

  2. 洛谷——P1062 数列

    洛谷——P1062 数列 题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,1 ...

  3. springboot整合mybatis连接mysql数据库出现SQLException异常

    在springboot整合mybatis连接数据库的时候,项目中遇到一个SQLException,我检查了properties配置文件,看数据源有没有配错,检查有没有打错字,在数据库中把sql语句查询 ...

  4. Sql查询一个列对应多个列

    Sql查询一个列对应多个列 今天遇到一个问题,表table1有两个字段col1.col2两个字段.先记录下来,以后有个参考. 现在需要查询出的数据满足如下要求: 1.col1重复.col2重复的数据只 ...

  5. the apple code

    i know you will forget but 9 you will

  6. [TypeScript] Collect Related Strings in a String Enum in TypeScript

    As of TypeScript 2.4, it is now possible to define string enums, or more precisely, enums with strin ...

  7. C# 如何修改Form不能修改窗体大小

    把窗体的FormBorderSytle改一下就可以了,改成FixedSingle或者Fixed3D都可以        

  8. 解决fragmentTransaction.replace不能全屏

    今天遇到个问题,使用fragmentTransaction.replace替换后的内容不能全屏.. FragmentManager fragmentManager = getSupportFragme ...

  9. vue中slot的笔记

    一言以蔽之:本来写在子组件里边的内容默认是不显示的,如果想相对于子组件在哪里进行显示,则使用slot标签代表占位符,代替那部分内容,是行间元素还是块级元素取决于原先的那个标签. 参考的连接是:http ...

  10. ibatis 入门

     iBatis 简单介绍: iBatis 是apache 的一个开源项目.一个O/R Mapping 解决方式,iBatis 最大的特点就是小巧.上手非常快.假设不须要太多复杂的功能.iBatis ...