【网站技术解析⑦】-- 弹窗验证码深度解读

btn.click(function () {
  var param = {"msg_input": $(".msg_input").val()};
  console.log(param);
  $.post('/find/', param, function (data) {
    var train_data = data.data;
    var sign = data.sign;
    var img_num = data.img_num;
    var user_ip= data.user_ip;
    var link_sign = data.link_sign;
    sessionStorage.setItem('link_sign', link_sign);
    sessionStorage.setItem('img_num', img_num);
    if(sign=="right") {
      $('#table_id_example').DataTable({
        searching: false,
        bLengthChange: false,
        "sInfo": "从 _START_ 到 _END_ /共_TOTAL_条数据",
      "bSort": false, //排序功能
       "bInfo": true,//页脚信息
       "language": {
       "info": "",  //表格左下角显示的文字
        "paginate": {
        "previous": "上一页",
        "next": "下一页"
      }
    },
    destroy: true, // 去掉重新加载数据的弹窗问题
   "data": train_data,
   "columns": [
     {data: 'name'},
     {
       data: 'url',
       render: function (data, type, row, meta) {
          return '<a onclick="userInfo(\'' + meta.row + '\')">' + data + '</a>';
// return '<a class =' + meta.row + '>'+ data +'</a>';
      }
      },
   ]
                    });
                }else if(sign=="error"){
  img_url = "/static/img/modal_img_" + img_num +".jpg";
  $(".qr_code").attr("src",img_url);
  $('.grayDiv,.loginDiv').stop().fadeIn();
                }

先来一坨代码，哈哈，估计能把你看懵逼

param：输入框的输入值，需要传到后端

$.post('/find/'）：后端是find视图

click_sign：（right/error），不过这个参数跟上一节的book_click_sign有重复，其实最早是这样的

如果是right:则出现表格,表格是前端datatable框架，具体用法和配置可以看后面文章介绍

如果是error:则出现弹窗

render：可以加一些自定义函数，比如表格返回的每个链接，都加了一个函数叫做userInfo，为点击网盘链接绑定的事件，接下来看看userInfo做了哪些事

every:根据datatable语法获取的表格每行的数据

new_url：每行的链接

click_num：ip点击网盘链接的次数，初始值为0，每点一个网盘链接都要加1，用来记录次数，如果超过3次则出现弹窗，当然我这里加的有组合判断条件，可以不用去理解，下面代码你只用关注click_num即可

click_num<=3:打开网盘链接

click_num>3:出现弹窗

img_num：可能会有多个二维码，随机出现，就设置了一个这样的变量，跟二维码图片路径做拼接

var click_num = 0;
function userInfo(rowIndex){
   every = $('#table_id_example').DataTable().rows().data()[rowIndex];
   new_url =  every["href"];
   click_num += 1;
    // 判断用户是否扫码
   var img_num = sessionStorage.getItem("img_num");
   var link_sign = sessionStorage.getItem("link_sign");
   if(link_sign=="true" || click_num<=3){
      window.open(every["href"],"_blank")
   }else if(link_sign=="false" && click_num>3){
      img_url = "/static/img/modal_img_" + img_num +".jpg";
      $(".loginDiv .qr_code").attr("src",img_url);
      $('.grayDiv,.loginDiv').stop().fadeIn();
        }
    }

对于find视图代码，基本跟上一节book_click_sign视图一样，主要还是为了返回一个sign信号

点击领取视频按钮的道理跟最近这两篇基本类似，还是判断sign标志即可

python爬虫人工智能大数据公众号