当前位置: 首页>编程语言>正文

javascript 模拟点击 div js模拟点击按钮

1.问题描述:

          在实际开发过程中,会因为各种各样的问题, 导致一批数据,统一执行一个操作或者一样的请求。

 

2.实现基础知识必备:

    2.1Chrome中关于Console的输出(js调试):

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_调用函数,第1张

      console.log 用于输出普通信息 

      console.info 用于输出提示性信息

      console.error用于输出错误信息

      console.warn用于输出警示信息

      console.dir(console)  可以查看console 下的所有方法

 

参考googleApi原版文档:  https://developers.google.com/web/tools/chrome-devtools/console/api

2.2  JS  中常用的方法函数的使用

 JavaScript 中的常用对象,经常忘记方法名称 : https://www.w3school.com.cn/jsref/jsref_obj_string.asp

 

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_javascript 模拟点击 div_02,第2张

 

a. sql查询出来数据,Execl导出,之后转换超过需要个格式装换成object对象

  Execl中的数据选择需要的行,直接复制到 Notepad2(系统自带) 中,利用他里面的正则表达式的替换规则做替换。(Ctrl+H)调出替换窗口

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_javascript 模拟点击 div_03,第3张

 1.经常使用的正则表达式 :Regular expression search  \s+  1个或者多个空白符

 2. 换行做替换用: 格式转换成 Transform backslashes  ,search String 中用\r\n做转换 

 3. 用在线工具 : http://www.bejson.com/json/col2json/  EXCEL ,CSV 转JSon

     把execl 中自己选择的行列直接复制过去,点击装换就 

[

{"CreateTime":"2019/07/03 04:44:15","LastUpdateTime":"2019/07/03 04:44:34"},
{"CreateTime":"2019/07/03 06:10:16","LastUpdateTime":"2019/07/03 06:10:35"}] 
 
 
 
 
 
b. object 对象集合foreach 访问object中的每个对象 
b1.对于逗号分隔的多个对象的访问 
         var   obstr="1050516,64244187";
           function  testTestIdStr(textStr)
{
    //组装成自己想要的的数据(用逗号分隔成元素)
     var Ids=textStr.split(',');
     ids.forEach(o=>{
      console.info(o);
 });
}
 
   b2. 对于多行的数据的(notePad2 中替换 execl 中的数据替换成一个字符串)
               var   obstr="1050516,64244187##1050538,64271921##1050554,64287642##1050593,64166857##1050669,63310506##1050870,64226341";
                   function textStr2(textOrderIdStrs)
{
 var obs=textOrderIdStrs.split('##');
 obs.forEach(o=>{
 var obAttrs=o.split(',');
 console.info(obAttrs[0]);
 });
} 
     b3.对于装换成的JSon格式的访问
var b=[
{"PKID":"958624","OrderId":"47763169","CreatedBy":"AUTOCommon","CreateTime":"2019/2/3 3:33"},
{"PKID":"958636","OrderId":"47514656","CreatedBy":"AUTOCommon","CreateTime":"2019/2/4 19:48"}
];function textJson(testStr)
{
 if(testStr.length==0)
 {
 return;
 }
 //下标访问方式
 testStr[0];
 testStr.forEach(o=>{
 console.info(o);
 //直接访问对象中成员
 console.info(o.PKID);
 })
}

 

c.js 中的定时服务的使用

  • setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() :在指定的毫秒数后调用函数或计算表达式。

setInterval(code,millisec,lang)(可以执行多次)

参数

描述

code

必需。要调用的函数或要执行的代码串。

millisec

必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

lang

可选。 JScript | VBScript | JavaScript

setTimeout(code,millisec,lang)(只执行一次)

参数

描述

code

必需。要调用的函数后要执行的 JavaScript 代码串。

millisec

必需。在执行代码前需等待的毫秒数。

lang

可选。脚本语言可以是:JScript | VBScript | JavaScript

 


function  setIntervalStr()
{
  var count=0; var lencount=3;
  
 //循环调用
  console.time("setInterval");
  var  flag=setInterval( function(){
  if(count>=lencount)
  {
    clearInterval(flag);
  }
  console.info(count);
  count++;
  
  },1000)
  console.timeEnd("setInterval");
  
  //单次调用
  console.time("setTimeout");
  var flag2=setTimeout(function(){
   console.info("aaaaa");
  },2000);
  
  console.timeEnd("setTimeout");
}

执行结果: 从输出结果来看 两个定时期中的待执行的方法是异步的,不影响主线程的正常执行。

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_开发工具_04,第4张

  3.实现方法:(F12,查询本次调用回来的报文)       循环调用同一个方法,数量多时,防止接口被打死,用了setInterval 的定时循环;限制执行过程中防止同一个单子重复调用,需要加把下标致前。调用方法职中得request参数

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_调用函数_05,第5张

request  headers参数

javascript 模拟点击 div js模拟点击按钮,javascript 模拟点击 div js模拟点击按钮_json_06,第6张

1.模拟一次报文请求中  Form Data 数据  请求

/// 定时循环调用执行方法
function textCallsetInterval(textOrderIds)
{
 var oBaosuns=textOrderIds.split(',');
 var index=0; var count=oBaosuns.length;
   // 定时服务开始
    var flag=setInterval
    (function(){
        if(index>=count)
        { 
          //定时服务终止
           clearInterval(flag);
        }
         //要执行请求的对象
         var o1=oBaosuns[index];
         //先放在这里,防止重复操作
         index++;
      //调用方法与 NetWork中单次调用中 RequestHeaders 中的path, obj需要传递额参数为 NetWork中的 全量Form Data  数据的组装
      $.post('/XX/XXX',{
       guid: 'b682d392-6196-4294-b9e6-58f869a52f37',
       servicePath: 'XXXXXX',
       serviceName: 'IXXXXXXX',
       operationName: 'XXXXXXXXX',
       extendHistories:[{Index:1}],
       parameterValues:[{Index:1 },{Index:2,Value:o1 },{Index:3,Value:2 },{Index:4},{Index:5},{Index:6 },{Index:7},{Index:8,Value:0}],
    },function(result){
      if(!result.IsSuccess)
      {
        console.error(o1);  
      }
      else
      {
       console.log (o1);
      }
    });
    }
    ,2000)
}


2.如果有按钮,则模拟点击按钮事件


var a='64131995,64136656'
var dates=a.split(',');
 var i=0; 
function auto() {
    if (i <datas.length) {
          setTimeout(() => {
            //对发送请求中的参数重新进行赋值
              var request = $("#requestcontainer ul li"); 
              request.eq(2).find('input').val(datas[i]); 
              console.info(datas[i]);
              i++;
             //找到需要操作的按钮的模拟点击操作
            $('#callWcfServiceBtn').click();
            auto();
     }, 2000);
   }
}


 

4.总结: 

        JS脚本编程,能辅助我们处理一些重复的工作,而不用动后台代码。

 


https://www.xamrdz.com/lan/5n61960703.html

相关文章: