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]!=''&&params[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; //返回参数值
}

  

原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作的更多相关文章

  1. js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  2. 使用js对select动态添加和删除OPTION示例代码

    动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助   <s ...

  3. 使用js对select动态添加和删除OPTION

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  4. 原生js实现增加(addclass),删除(removeclass),判断是否存在(hasclass),如果存在删除,如果不存在添加(toggleclass)和获取类名(getbyclass)的方法

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. jQuery——类的添加与删除

    添加类:addClass 删除类:removeClass 判断类是否存在:hasClass <!DOCTYPE html> <html lang="en"> ...

  6. 在js中为对象添加和删除属性

    对于一个普通的js对象: var obj = { name:"mary", age:21 } 如果我们要对它添加新属性的话可以使用下列方式: obj.address = " ...

  7. 原生js动态创建、获取、删除属性的几种方式

    1.创建属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  8. js中cookie的添加,删除,查询总结

    function addCookie(objName,objValue,objHours){//添加cookie var str = objName + "=" + escape( ...

  9. js数组元素的添加和删除

    简单测试例子: var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "cc ...

随机推荐

  1. 003-pro ant design 前端权限处理-支持URL参数的页面

    前天需要增加MD5引用 https://www.bootcdn.cn/blueimp-md5/ 1.修改权限文件(CheckPermissions.js)使用自定义权限 2.配置异常页面 2.1.创建 ...

  2. JS取出两个数组中不重复的值

    var array = [0, 1, 2, 3, 4, 'age', 6, 7, 8, 9]; var array2 = [0, 1, 'age', 6, 7, 8, 9]; var arr3 = [ ...

  3. 如何设置locale

    什么是 locale? 是根据计算机用户所使用的语言,所在国家或者地区,以及当地的文化传统所定义的一个软件运行时的语言环境 locale定义文件放在目录 /usr/share/i18n/locales ...

  4. MongoDB--预备

  5. [pat]1007 Maximum Subsequence Sum

    经典最大连续子序列,dp[0]=a[0],状态转移dp[i]=max(dp[i-1]+a[i],a[i])找到最大的dp[i]. 难点在于记录起点,这里同样利用动态规划s[i],如果dp[i]选择的是 ...

  6. 从零开始一起学习SLAM | 为什么要用齐次坐标?

    在涉及到计算机视觉的几何问题中,我们经常看到齐次坐标这个术语.本文介绍一下究竟为什么要用齐次坐标?使用齐次坐标到底有什么好处? 什么是齐次坐标?简单的说:齐次坐标就是在原有坐标上加上一个维度: 使用齐 ...

  7. cocos2d-x JS 纯代码渲染Lable描边

    /** * Enables shadow style and sets color, offset and blur radius styles. * @param {cc.Color} shadow ...

  8. java类的包装类

    包装类的基本用法 为什么需要包装类(Wrapper Class) java并不是纯面向对象的语言,java语言是一个面向对象的语言,但是java中的基本数据类型却不是面向对象的,但是我们在实际使用中经 ...

  9. 《大话设计模式》c++实现 建造者模式

    一.UML图 关键词:Subject维护一个Observer列表,Subject执行Notify()时就执行列表中的每个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的依 ...

  10. Toolkit tool 获取屏幕、显示在屏幕中心

    2018-11-11  15:30:05开始写 Toolkit tool = Toolkit.getDefaultToolkit(); Dimension d = tool.getScreenSize ...