Home > Developer > JavaScript
First look at a section of JS code, the main implementation of the addition of the first time through the asynchronous request to determine whether the existence, if not exist, in the add operation:
function add(url,data) { var isExited = isExited(data); if(!isExited){ addRequest(url, data); }}
When I add a data, I first by judging whether in the database exists (of course, if the front and back station is completely separated, should not be the frontend business logic judgment, the front end should only, to show the data), first, isexited () request is AJAX request implementation, this is asynchronous, it is obvious that The interface is most likely to execute the following function (usually Yes) when no results are returned, so that the value of isexited is undefined, which is obviously not desired, and if a similar function can be implemented using a callback function, a case is described below.
The process is as followsThe front JSP interface is as follows:
<%@ page language="java" contenttype="text/html; Charset=utf-8 "pageencoding="UTF-8 "%><%@ taglib prefix="C" uri="Http://java.sun.com/jsp/jstl/core" %><head> <meta charset="Utf-8"> <meta http-equiv="x-ua-compatible" content="Ie=edge" > <meta name="viewport" content="Width=device-width, initial-scale=1 "> <title>JS callback function case</title> <!--Bootstrap -- <link href="<c:url value= '/lib/bootstrap/css/bootstrap.min.css '/>" rel="stylesheet"> <script type="Text/javascript"> /** * Delete request */function supplierdelete(Element) {var< /c10> id = element.parentnode.parentnode.cells[0].innerhtml; Modaldeleterequest (' ${pagecontext.request.contextpath}/oms/supplier/remove/', id); } </script></head><body><!--top navigation --<div class="NavBar navbar-inverse navbar-fixed-top" role=" Navigation " id=" Menu-nav "></div><div class="Container partner-table-container textfont"> <table class="Table table-striped detailtableset"> <caption><h2>JS callback function case</H2></caption> <br> <tr class="Table-hover form-horizontal"> <TD class="Info">123</td> <TD class="Info">123</td> <TD class="Info">123</td> <TD class="Info">123</td> <TD class="Info">123</td> </tr> <tr> <TD>123</td> <TD>123</td> <TD>123</td> <TD>123</td> <TD>123</td> <TD> <a onclick="Supplierupdate (This)">Modify</a> <a onclick="Supplierdelete (This)">Delete</a> </td> </tr> </table></div><!--show successful failure of Modal--><% @include file="/modal-custom.jsp" %><script src="<c:url value= '/lib/jquery-1.8.3.min.js '/>"></script><script src="<c:url value= '/lib/bootstrap/js/bootstrap.min.js '/>"> </script><script type="text/javascript" src="<c:url value= '/js /modal-operate.js '/>' ></script></body></html>The main JS code is as follows:
type="text/javascript"> /** * 删除的请求 */ function supplierDelete(element) { var id = element.parentNode.parentNode.cells[0].innerHTML; modalDeleteRequest(‘${pageContext.request.contextPath}/oms/supplier/remove/‘, id); } </script>
This is when the button is clicked to delete, but I want to pop up a confirmation delete dialog box, if the popup after the selection is confirmed, the specific deletion method is called, there is a reference to the modal box (bootstrap frame), mainly for the display of popup information, the code is as follows:
<%@ page language="java" pageencoding="UTF-8" %><%@ taglib prefix="C" uri="Http://java.sun.com/jsp/jstl/core" %><!--modal frame (Modal)--<div class="Modal Fade" id="Modal-result" tabindex= "-1" Role="dialog"aria-labelledby="Mymodallabel" aria-hidden= "true"> <div class="Modal-dialog"> <div class="Modal-content"> <div class="Modal-header"> <button type="button" class="Close"data-dismiss= "Modal" Aria-hidden="true"> ×</button> <h4 class="Modal-title" id="Mymodallabel">Information</h4> </div> <div class="Modal-body" id="Modal-add-result-text" > </div> <div class="Modal-footer"> <button type="button" class="btn btn-default" Data-dismiss="modal"> Shut down</button> </div> </div> <!--/.modal-content -- </div> <!--/.modal --</div>Below is the protagonist of today:
/** * Delete Requested action * @param URL to delete request URL * @param ID deleted ID */function modaldeleterequest (URL, id) {confirmisdelete (URL, id, deleterequest);}/** * Callback function called after deleting the alert box confirmation * @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");}/** * Popup dialog to confirm whether to delete * @param URL Delete request URL * @param ID Delete Request ID * @param callback callback function, at the end of the time need The function that makes the callback * /function Confirmisdelete (URL, id, callback) {varConfirmdeletedialog = $ (' <div class= ' modal fade ' ><div class= ' modal-dialog ' > '+' <div class= ' modal-content "><div class=" Modal-header "><button type=" button "class=" Close "+' data-dismiss= ' modal "aria-hidden=" true ">×</button> "+'
+' <div class= ' alert alert-warning ' > confirm to delete? Can not be restored after deletion Oh! </div></div><div class= "Modal-footer" > '+' <button type= ' button ' class= ' btn btn-default ' data-dismiss= ' modal ' > Cancel </button> '+' <button type= ' button ' class= ' btn btn-success ' id= ' deleteok ' > Delete </button></div></div> ' +' </div></div> '); Confirmdeletedialog.modal ({keyboard:false}). On ({' Hidden.bs.modal ': function () {$ ( This). Remove (); } });varDeleteconfirm = Confirmdeletedialog.find (' #deleteOK '); Deleteconfirm.on (' click ', function () {Confirmdeletedialog.modal (' Hide ');//Hide Dialog //functions that require callbacksCallback (Deleterequest (URL, id)); });}
Above because the code is more, see a simple frame below:
/** * 回调函数测试方法 * * @param callback * 回调的方法 */function testCallback(callback) { alert(‘come in!‘); callback();}/** * 被回调的函数 */function a() { alert(‘a‘);}/** * 开始测试方法 */function start() { testCallback(a);}
To the end of this callback, we hope to help!
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JavaScript Custom callback function
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
