1 类操作
function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)){ if(element.setAttribute){ element.setAttribute("class",element.getAttribute("class")+" "+cla); }else{ element.className = element.className+" "+cla; } } } function removeClass(cla,element){ if(hasClass(cla,element)){ var allClass = element.className.trim().split(" "); allClass.splice(allClass.indexOf(cla),1); element.className = allClass.join(' '); } }
2 当很多条数据时,对某条数据进行增删改查
利用vue或angular的双向数据绑定,当操作时只需要对数据进行清空或赋值,而jquery或原生js没有该功能,实现起来需要获取页面的html元素对其val或innerHTML
常见的jquery 设置val和获取的方法总结:
// input框 textarea $('input[name="**"]').val(obj.**); $('input[name="**"]').val(); $('textarea[name="text"]').val(); // input radio checkbox 详见http://www.cnblogs.com/xhliang/p/9008931.html $('input[name="display"][value='+obj.display+']').attr("checked",true); //设置 var hotTag = $('input[name="hotTag"]:checked').val(); //获取 //获取图片资源需要fd var img = $('#imgfile')[0].files; for(var i = 0;i <img.length;i++){ fd.append("imgfile",img[i]); } 当没有图片资源时可以统一处理 function getParams(selector) { var rtn={}; $('#'+selector).serializeArray().map(function(d){ rtn[d.name]=d.value; }); return rtn; } //删除空参数 function deleteNull(params){ var rst = {}; var reg = /^[s]+$/; for(var item in params){ if(params[item]!=''&¶ms[item]!=undefined&&!(reg.test(params[item]))){ rst[item]= params[item]; } } return rst; }
3 ajax 请求
// ajax 请求 改方法有限制 function ajaxReqst(par,url,method){ var xhr = createXHR(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ // alert(xhr.responseText); } else { // alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open(method, url, true); //true异步请求,false同步 xhr.send(par); } function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ if(typeof arguments.callee.activeXString != "string"){ var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i, len; for (i=0,len=versions.length; i < len; i++){ try { new ActiveXObject(versions[i]); arguments.callee.activeXString = versions[i]; break; } catch (ex){ //跳过 } } } return new ActiveXObject(arguments.callee.activeXString); } else { throw new Error("No XHR object available."); } }
//原生JS实现AJAX方法 function ajax() { var ajaxData = { type: arguments[0].type || "GET", url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "text", contentType: arguments[0].contentType || "application/json", beforeSend: arguments[0].beforeSend || function() {}, success: arguments[0].success || function() {}, error: arguments[0].error || function() {}, userId:arguments[0].userId, token:arguments[0].token, } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType = ajaxData.dataType; xhr.open(ajaxData.type, ajaxData.url, ajaxData.async); xhr.timeout = 12000; xhr.setRequestHeader("Content-Type", ajaxData.contentType); xhr.setRequestHeader("userId", ajaxData.userId); xhr.setRequestHeader("token", ajaxData.token); // 针对上面的contentType是application/json 若使用application/x-www-form-urlencoded时 xhr.send(convertData(ajaxData.data)); xhr.send(JSON.stringify(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { ajaxData.success(xhr.response) } else { ajaxData.error() } } } } function convertData(data) { console.log(data) if (typeof data === 'object') { var convertResult = ""; for (var c in data) { convertResult += c + "=" + data[c] + "&"; } convertResult = convertResult.substring(0, convertResult.length - 1) console.log('convertResult',convertResult) return '{'+convertResult +'}'; } else { return data; } }
//原生JS实现AJAX方法 function ajax() { var ajaxData = { type: arguments[0].type || "GET", url: arguments[0].url || "", async: arguments[0].async || "true", data: arguments[0].data || null, dataType: arguments[0].dataType || "text", contentType: arguments[0].contentType || "application/json", beforeSend: arguments[0].beforeSend || function() {}, success: arguments[0].success || function() {}, error: arguments[0].error || function() {}, userId:arguments[0].userId, token:arguments[0].token, } ajaxData.beforeSend() var xhr = createxmlHttpRequest(); xhr.responseType = ajaxData.dataType; xhr.open(ajaxData.type, ajaxData.url, ajaxData.async); xhr.timeout = 12000; xhr.setRequestHeader("Content-Type", ajaxData.contentType); xhr.setRequestHeader("userId", ajaxData.userId); xhr.setRequestHeader("token", ajaxData.token); xhr.send(JSON.stringify(ajaxData.data)); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { ajaxData.success(xhr.response) } else { ajaxData.error() } } } }
注释:
1. open(method, url, async) 方法需要三个参数:
method:发送请求所使用的方法(GET或POST);与POST相比,GET更简单也更快,并且在大部分情况下都能用;然而,在以下情况中,请使用POST请求:
- 无法使用缓存文件(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST 没有数据量限制)
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
url:规定服务器端脚本的 URL(该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务));
async:规定应当对请求进行异步(true)或同步(false)处理;true是在等待服务器响应时执行其他脚本,当响应就绪后对响应进行处理;false是等待服务器响应再执行。
2. send() 方法可将请求送往服务器。
3. onreadystatechange:存有处理服务器响应的函数,每当 readyState 改变时,onreadystatechange 函数就会被执行。
4. readyState:存有服务器响应的状态信息。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
5. responseText:获得字符串形式的响应数据。
4 页面离开时操作
// 离开当前页面触发该函数,记得测试一下该方法下可以发起请求,将验证在google下可以进行数据的传递 window.onbeforeunload = function(){ var fd = new FormData(); fd.append("title", 'all'); fd.append("answer",qaCollection); fd.append("gaid",'3'); ajaxReqst(fd,'url','post'); console.log(qaCollection); console.log("再此不能进行接口调用,只能进行提示页面已经退出了"); }
// 离开当前页面触发该函数,记得测试一下该方法下可以发起请求,将验证在google下可以进行数据的传递
window.onbeforeunload = function(){
var fd = new FormData();
fd.append("title", 'all');
fd.append("answer",qaCollection);
fd.append("gaid",'3');
ajaxReqst(fd,'/survey-web/LogService/api/questionnaireData','post');
console.log(qaCollection);
console.log("再此不能进行接口调用,只能进行提示页面已经退出了");
}
5 获取url某个参数
function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 console.log(r) if (r != null){ console.log(r[2]) return r[2] // return decodeURIComponent(r[2]); } return null; //返回参数值 }