视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js自定义回调函数_javascript技巧
2020-11-27 21:47:16 责编:小采
文档


背景分析

首先看一段js的代码,主要实现添加的时候首先通过异步请求判断是否存在,如果不存在的话,在进行添加操作:



当我添加一个数据的时候,我首先通过判断是否在数据库中存在(当然,如果前后台彻底分离的话,不应该前端进行业务逻辑的判断,前端只应该,用来展示数据),首先,isExited()的请求是ajax请求实现,这个是异步的,很显然,界面很有可能在没有返回结果的时候,就执行下边的函数(通常情况下是的),就使得isExited的值是undefined,这显然不是想要的,如果要实现类似的功能可以使用用回调函数实现,下边介绍一个案例。

过程如下

前台jsp界面如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

 
 
 
 JS回调函数案例
 
 " rel="stylesheet">

 

 /**
 * 删除的请求
 */
 function supplierDelete(element) {
 var id = element.parentNode.parentNode.cells[0].innerHTML;
 modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
 }
 








 

JS回调函数案例

123 123 123 123 123
123 123 123 123 123 修改 删除
<%@include file="/modal-custom.jsp" %> "> ">

主要的js代码如下:



这里就是当点击按钮的时候进行删除,但是我想弹出一个确认删除对话框,如果弹出之后选择的是确认之后,才调用具体的删除方法,还有这里边引用了一个modal框(bootstrap框架),主要是用于展示弹出框信息,代码如下:

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


下边是今天的主角:

/**
 * 删除请求的操作
 * @param url 删除请求的url
 * @param id 删除的id
 */
function modalDeleteRequest(url, id) {
 confirmIsDelete(url, id, deleteRequest);
}
/**
 * 在删除警告框确认之后调用的回调函数
 * @param url
 * @param id
 */
function deleteRequest(url, id) {
 $.get(url + id, function (result) {
 $("#modal-add-result-text").text(result.msg);
 $("#modal-result").modal('show');
 }, "json");
}


/**
 * 弹出对话框确认是否删除
 * @param url 删除请求的url
 * @param id 删除请求的id
 * @param callback 回调函数,在最后的时候需要进行回调的函数
 */
function confirmIsDelete(url, id, callback) {
 var confirmDeleteDialog = $(''
 + ''
 + ''
 + '确认要删除吗?删除之后无法恢复哦!'
 + ''
 + ''
 + '');

 confirmDeleteDialog.modal({
 keyboard: false
 }).on({
 'hidden.bs.modal': function () {
 $(this).remove();
 }
 });

 var deleteConfirm = confirmDeleteDialog.find('#deleteOK');
 deleteConfirm.on('click', function () {
 confirmDeleteDialog.modal('hide'); //隐藏dialog
 //需要回调的函数
 callback(deleteRequest(url, id));
 });
}

这里写图片描述
这里写图片描述

上边由于代码比较多,下边看一个简单的框架:



到此回调结束,希望对大家学习有帮助,小编也对js自定义回调函数有了更深入的了解。

下载本文
显示全文
专题