Node实践总结5——AJAX

AJAX

ajax是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）的简称，是一种比较流行的加载页面的手法，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
提高网页加载的速度，减少网络请求的数据量，在不刷新页面的情况下修改网页。

由于AJAX的语法本身不是本次的重点，所以就不详细讲了。

---

具体实现

要想使用AJAX，前端和后端都需要做相应的修改，下面先讲一下我工程中的业务逻辑，我打算实现的功能是对日志信息的模糊搜索。
为了方便阐述，先上几张图（不要嘲笑理工男的审美 >_< ）
①登陆成功后显示的默认主页 ↓↓

②点击WAF日志之后向后台查询数据库并动态生成表格显示出来↓↓

③在搜索框输入想要查询的关键字，通过AJAX与服务器通信，把关键字POST到服务器，通过where like的句型可以做到模糊搜索↓↓

下面从代码上来阐述实现的过程。

---

前端

具体的思路都写到注释里了，比较清晰，就不再重述一遍了。

$(function (){
  $(document).ready(function(){
    $('.btn-search').click(search);//对搜索按钮绑定search处理函数
    $('td:last-child').each(function() { //根据最后一个字段的值显示不同的底色
      if($.trim($(this).text()) == 'true') {
        $(this).parent().addClass('success');
      } else {
        $(this).parent().addClass('danger');
      }
    }); 
  });
});
function search() {
  let content = $('#searchBox').val();
  if (content) { //判断点击搜索时是否已经输入了内容
    $.post('/waf_log',{content:content},function(result){
      //AJAX，将查询的内容POST到服务器,并处理传回的数据
      let length = result.len;
      if ($.isEmptyObject(result.logs)) { //如果没有查询到数据则返回提示
        alert(`
        No result matched the given condition!

        Please retry!`);
      } else { //如果查询到数据则动态生成表格               
        let tbody = $('tbody');
        tbody.html("");
        for (var i = 0;i<length;i++) {
          let tr = $('<tr></tr>');
          tr.appendTo(tbody);
          $('<td></td>').text(result.logs[i].id).appendTo(tr);
          $('<td></td>').text(result.logs[i].time).appendTo(tr);
          $('<td></td>').text(result.logs[i].username).appendTo(tr);
          $('<td></td>').text(result.logs[i].function).appendTo(tr);
          $('<td></td>').text(result.logs[i].url).appendTo(tr);
          $('<td></td>').text(result.logs[i].param).appendTo(tr);
          $('<td></td>').text(result.logs[i].result).appendTo(tr);
          if ($.trim(result.logs[i].result) == 'true') {
            tr.addClass('success');
          } else {
            tr.addClass('danger');
          }
        }
      }
    });
  } else { //没有输入要搜索的关键词，则弹出提示
    alert('There is no condition!');
  }
}   

---

后端

具体的思路都写到注释里了，比较清晰，就不再重述一遍了。

//采用AJAX处理对waf_log表的查询
router.post('/waf_log',async function(ctx,next) {
  var logs = {}; //用于存储查询的结果
  var len = 0; //多个for循环共用的下标计数器
  var content = ctx.request.body.content; //解析出请求的内容
  var content1 = '%'+content+'%'; //前后加上‘%’用于模糊搜索
  if (typeof(content) == Number) { //针对ID的查询，不支持模糊搜索
    var result1 = await WafLogs.where('id','=',content).fetchAll(); 
    for(;len < result1.length;len++){
      logs[len] = result1.models[len].attributes;
    }
  }
  //针对其它字段的查询，全部使用模糊搜索的机制处理
  var result2 = await WafLogs.where('time','like',content1).fetchAll(); 
  var result3 = await WafLogs.where('username','like',content1).fetchAll(); 
  var result4 = await WafLogs.where('function','like',content1).fetchAll(); 
  var result5 = await WafLogs.where('url','like',content1).fetchAll(); 
  var result6 = await WafLogs.where('param','like',content1).fetchAll(); 
  var result7 = await WafLogs.where('result','like',content1).fetchAll(); 
  //将所有查询得到的结果拼接在一起
  for(;len < result2.length;len++){
    logs[len] = result2.models[len].attributes;
  }
  for(;len < result3.length;len++){
    logs[len] = result3.models[len].attributes;
  }
  for(;len < result4.length;len++){
    logs[len] = result4.models[len].attributes;
  }
  for(;len < result5.length;len++){
    logs[len] = result5.models[len].attributes;
  }
  for(;len < result6.length;len++){
    logs[len] = result6.models[len].attributes;
  }
  for(;len < result7.length;len++){
    logs[len] = result7.models[len].attributes;
  }
  ctx.body = {logs,len}; //将结果返回到前端
});

---

总结

整个过程理顺了以后，还是比较清晰的，由于业务逻辑不是很复杂，所以还算简单，以后写到复杂的模块，再回来补充整理。