js中回调函数的运用

最新推荐文章于 2024-08-08 00:15:00 发布

qiyongkang520

最新推荐文章于 2024-08-08 00:15:00 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： javascript ajax 实例 callback 函数

本文链接：https://blog.csdn.net/qiyongkang520/article/details/49478933

版权

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在javascript中，会经常用到回调的方式，比如，当某一请求执行完成后，要完成某一指定的动作，但是程序无法知道请求什么时候完成，这时我们便可以使用回调来实现，像ajax就用到了回调的概念。下面，笔者列举自己在项目中用到的两个实例。

实例一、ajax请求遮罩层的实现

首先，来看看js代码：

function postRequest(object, callback) {
  //请求之前，显示遮罩层，以及loading图标
  window.top.$('#maskCell').show();
  window.top.$('#loadImg').show();

  $.post(object.url, object.param, function(data){
    //请求成功之后，隐藏遮罩层以及loading图标
    window.top.$('#maskCell').hide();
    window.top.$('#loadImg').hide();

    callback(data);
  });
}

再来看看调用的js代码：

$(function(){
    //Get data by user id
    var id = $('#detailUserId').val();

//  $.getJSON('sys/user/getEntity.do', {'id': id}, function(data) {
//    console.log(data);
//    
//    //加载数据到表单
//    $('#singleUserDlogForm').form('load',data);
//  });

    postRequest({
      url:'sys/user/getEntity.do',
      param: {'id':id}
    }, function(data) {
    console.log(data);

    //加载数据到表单
    $('#singleUserDlogForm').form('load',data);
    });
});

这里，每当请求完成后去掉遮罩层，并通过回调完成特定的任务。

实例二、导入成功后边重新加载数据

首先，来看看页面：
这里写图片描述
这里，点击开始导入，导入成功后便要重新加载datagrid。
注意，此导入窗口在父窗口中，datagrid数据表格在iframe中，所以笔者这里会将回调函数名从iframe窗口传到导入窗口。
下面来看看userlist.jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>User List</title>
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="resources/logicCSS/user/listUser.css">
</head>
<body>
<h2>User List</h2>
<div>
<form id="queryForm">
ID：<input type="text" name="id"/> 姓名：<input type="text" name="userName"/> <a href="javascript:void(0);" id="search">搜索</a>
</form>
</div>
<a type="import" id="import" class="easyui-menubutton" callback="myCallback">导入</a>
<!-- 导出 -->
<a type="export" id="export" class="easyui-menubutton">导出</a>
<!-- 表格 -->
<div data-options="region:'center'" class="tab">
    <table id="userListTab"></table>
</div>

<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery-1.8.0.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="resources/logicJS/common/common.js"></script>
<script type="text/javascript">
var basePath = '<%=basePath %>';
console.log('currentMenu：', window.top.currentMenu);
console.log('basePath：', basePath);
</script>
<script type="text/javascript" src="resources/logicJS/user/listUser.js"></script>

</body>
</html>

然后，再来看看其对应的listUser.js:

$(function() {
  console.log('windows是否一致', window === window.top);

  //初始化导出按钮
  initMyExportMenu();

    //添加搜索按钮点击事件
    $('#search').click(function() {
        search();
    });

    //添加导入点击事件
    $('#import').click(function() {
      console.log('弹出导入对话框。。');

      //获取回调函数名
      var callbackName = $(this).attr('callback');

      //用户详情对话框
      var importWindow = window.top.$('#importWin');
      if(importWindow.length <= 0) {
        importWindow = window.top.$("<div id='importWin'/>").appendTo(window.top.document.body);
      }
      importWindow.window({
        title:'导入',
        closed: false,
        closable: true,
        draggable: true,
        resizable: true,
        width: 400,
        height: 300,
        modal: true,
        href: 'sys/redirect/redirectHomePage.do?path=import&callback=' + callbackName,
        onClose: function() {
          importWindow.window("destroy");
        }
      });
    });

    //加载userlist到datagrid中去，使用datagrid默认分页机制
    $("#userListTab").datagrid({
        fit:true,
        fitColumns:true,
        collapsible:false,
        nowrap: true,
        autoRowHeight: true,
        striped: true,
        url: 'sys/user/getPageModel.do',
        idField : 'id',
        remoteSort: true,
        loadMsg: 'Please wait...',
        checkOnSelect:false,
        singleSelect: false,
        frozenColumns:[[
          {field:'ck',checkbox:true}
        ]],
        columns:[[
        {field:'id',title:'用户id',sortable:true},
          {field:'userName',title:'用户姓名',sortable:true},
          {field:'age',title:'用户年龄',sortable:true},
          {field:'opt',title:'操作', align:'center', formatter:function(value,rec, index) {
              return '<a id="detail" href="javascript:void(0);" onclick="detail(' + rec.id +')">查看</a> <a id="edit" href="javascript:void(0);" onclick="edit(' + rec.id + ')">编辑</a> <a id="delete" href="javascript:void(0);" onclick="deleteUser(' + rec.id + ')">删除</a>';
          }}
        ]],
        //工具栏：添加、批量删除
        toolbar: [{
            id: 'btnAdd',
            text: 'Add',
            iconCls:'icon-add',
            handler:function() {
                edit();
            }
        }, '-', {
            id:'btnDelete',
            text: 'Delete',
            iconCls:'icon-cut',
            handler: function() {
                var rows =  $("#userListTab").datagrid('getChecked');
                var array = [];
                $.each(rows, function(index, row){
                    array.push(row.id);
                });
                deleteUser(array);
            }
        }],
        pagination:true,
        pageSize: 5,
        pageList: [3,4,5],
        onLoadSuccess:function(data){
            console.log(data);
        }
    });

    //分页
    var p = $('#userListTab').datagrid('getPager');
    $(p).pagination({
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 {pages} 页', 
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
            onBeforeRefresh:function(){}
            //onSelectPage: function(pageNumber, pageSize) {} --此事件添加，就会导致当页码或页大小变化时，不向后台发送请求
    });

});

//查看详情
function detail(id) {
    //用户详情对话框
    var addWindow = window.top.$('#detailWin');
    if(addWindow.length <= 0) {
        addWindow = window.top.$("<div id='detailWin'/>").appendTo(window.top.document.body);
    }
    addWindow.window({
        title:'用户详情',
        closed: false,
        closable: true,
        draggable: true,
        resizable: true,
        width: 900,
        height: 600,
        modal: true,
        href: 'sys/redirect/redirectHomePage.do?path=user_detail&id=' + id,
        onClose: function() {
            addWindow.window("destroy");
        }
    });
}

//添加和编辑，共用
function edit(id) {
    //编辑用户对话框
    var addWindow = window.top.$('#saveOrEditUserWin');
    if(addWindow.length <= 0) {
        addWindow = window.top.$("<div id='saveOrEditUserWin'/>").appendTo(window.top.document.body);
    }
    addWindow.window({
        title:'添加和编辑用户',
        closed: false,
        closable: true,
        draggable: true,
        resizable: true,
        width: 900,
        height: 600,
        modal: true,
        href: 'sys/redirect/redirectHomePage.do?path=user_save&id=' + id,
        onClose: function() {
            addWindow.window("destroy");
        }
    });
}

//删除
function deleteUser(ids) {
    var array = [];

    //判断是单个删除，还是多个删除
    if(typeof(ids) === 'number') {
        array.push(ids);
    } else {
        array = ids;
    }

    //删除确认
    window.top.$.messager.confirm('警告', '你确定要删除吗?', function(result){
        if(result) {
//          $.post(baseURL + '/user/deleteEntity.do', {ids: array}, function(data){
//              window.top.$.messager.alert('提示', '删除成功！！');
//              
//              //Reload data
//              $("#userListTab").datagrid('reload');          
//          });
            postRequest({
            url: 'sys/user/deleteEntity.do',
            param: {ids: array}
          }, function(data) {
        window.top.$.messager.alert('提示', '删除成功！！');

        //Reload data
        $("#userListTab").datagrid('reload'); 
          });
        }
    }); 
}

//搜索
function search() {
    var params = []; 
    //自动序列化表单元素为JSON对象 
    var fields =$('#queryForm').serializeArray(); 
    console.log(fields);
    $.each(fields, function(i, field){  
        if(field.name === 'id' && $.trim(field.value) === '') {
            field.value = 0;
        }
        params[field.name] = field.value; 
    });  
    console.log('params', params['userName']);
    //重新加载数据
    $('#userListTab').datagrid('load',params); 
}

/**
 * 初始化导出按钮
 */
function initMyExportMenu(){
  var exportsubmenu = '<div id="exportMenu_sub">'+
  '<div id="export_crrent"><span class="exportcurrent"></span>导出当前页</div>'+
  '<h1 class="excel-line"></h1>'+
  '<div id="export_all"><span class="exportall"></span>导出全部</div>'+
  '</div>';
  $("body").append(exportsubmenu);
  var exports = $("a[type='export']");
  $.each(exports,function(data){

    var exportMenu = $(this).menubutton({ 
      menu: "#exportMenu_sub",
      iconCls:"icon-export"

    }); 
    $(exportMenu.menubutton('options').menu).menu({
      onHide:function(){
      },
      onClick: function (item) {
      if(item.id=="export_crrent"){
        console.log('导出当前页');
        var options = $('#userListTab').datagrid('getPager').data("pagination").options;
        var curr = options.pageNumber;
        console.log('当前页：', curr);
        var pageSize = options.pageSize;
        console.log('页大小', pageSize);

        //通过隐藏域传参数

//        $("#queryForm").form('submit',{
//              url : 'tm/illegalBusinessWebsiteDetail/exportillegalBusiness.do',
//              onSubmit : function() {
//                return $(this).form('validate');
//              },
//              success : function(data) {
//              }
//         });

      }
      if(item.id=="export_all"){
        console.log('导出全部');
//        $("#queryForm").form('submit',{
//          url : 'tm/illegalBusinessWebsiteDetail/exportillegalBusiness.do',
//          onSubmit : function() {
//            return $(this).form('validate');
//          },
//          success : function(data) {
//          }
//         });

      }

      }
    });

  });
}

/**
 * 回调函数
 * @returns
 */
function myCallback(name) {
  console.log('回调函数执行。。' + name);
  //重新加载datagrid
  $("#userListTab").datagrid('reload'); 
}

最后，再来看导入窗口页面import.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String callback = request.getParameter("callback");
  System.out.println("回调函数为：" + callback);
%>
<script type="text/javascript">
var callback = '<%=callback%>';
console.log('callback:', callback);
</script>
<div style="width:100%;height:100%;position:relative;">
    <button id="startImport" style="position:relative;top:224px;left:50px;height:20px;">开始导入</button>
</div>

<script type="text/javascript" src="resources/logicJS/common/common.js"></script>
<script type="text/javascript" src="resources/logicJS/common/import.js"></script>

其对应的js，import.js：

$(function() {
  console.log('windows是否一致', window === window.top);
  $('#startImport').click(function() {
    console.log('开始导入');

    var iframe = $('#mainPanel > iframe' ,window.top.document)[0];
    var currentChildWindow = iframe.contentWindow || iframe.window;
    console.log('callback', callback);
    currentChildWindow[callback]('qiyongkang');
  });
});

最后，点击‘开始导入’按钮后，控制台的输入如下图：
这里写图片描述
说明，回调成功啦！
今天，就讲到这儿啦，有些没讲清楚或是有问题的地方，欢迎大家指出，谢谢！

qiyongkang520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中回调函数的运用

在javascript中，会经常用到回调的方式，比如，当某一请求执行完成后，要完成某一指定的动作，但是程序无法知道请求什么时候完成，这时我们便可以使用回调来实现，像ajax就用到了回调的概念。下面，笔者列举自己在项目中用到的两个实例。实例一、ajax请求遮罩层的实现首先，来看看js代码：function postRequest(object, callback) { //请求之前，显示遮罩层，以
复制链接

扫一扫

专栏目录