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

2022-04-14 02:28:42

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; //返回参数值

}

码农公寓

相关文章