Rumah > Artikel > hujung hadapan web > js kemahiran function_javascript panggilan balik tersuai

js kemahiran function_javascript panggilan balik tersuai

WBOYasal: 2016-05-16 15:25:501356semak imbas

Analisis Latar Belakang

Pertama-tama lihat sekeping kod js apabila menambah, mula-mula tentukan sama ada ia wujud melalui permintaan tak segerak, tambahkannya:

function add(url,data) {
  var isExited = isExited(data); 
  if(!isExited){
    addRequest(url, data); 
  }
}

Apabila saya menambah sekeping data, saya mula-mula menilai sama ada ia wujud dalam pangkalan data (sudah tentu, jika bahagian hadapan dan bahagian belakang dipisahkan sepenuhnya, bahagian hadapan tidak seharusnya menilai logik perniagaan, bahagian hadapan -end hanya boleh digunakan untuk memaparkan data), pertama , permintaan isExited() ialah pelaksanaan permintaan ajax Ini jelas sekali, antara muka mungkin melaksanakan fungsi berikut apabila tiada hasil dikembalikan (biasanya ya). , menjadikan nilai isExited undefined , ini jelas bukan yang anda mahukan. Jika anda ingin mencapai fungsi yang serupa, anda boleh menggunakan fungsi panggil balik.

Prosesnya adalah seperti berikut

Antara muka jsp bahagian hadapan adalah seperti berikut:

<%@ 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回调函数案例</title>
  <!-- Bootstrap -->
  <link href="<c:url value='/lib/bootstrap/css/bootstrap.min.css'/>" rel="stylesheet">

  <script type="text/javascript">

    /**
     * 删除的请求
     */
    function supplierDelete(element) {
      var id = element.parentNode.parentNode.cells[0].innerHTML;
      modalDeleteRequest('${pageContext.request.contextPath}/oms/supplier/remove/', id);
    }
  </script>
</head>
<body>
<!-- 顶部导航 -->
<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回调函数案例</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)">修改</a> 
          <a onclick="supplierDelete(this)">删除</a>
        </td>
      </tr>
  </table>
</div>

<!--显示成功失败的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>

Kod js utama adalah seperti berikut:

<script type="text/javascript">

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

Berikut ialah apabila butang diklik untuk memadam, tetapi saya ingin memunculkan kotak dialog pengesahan Jika pengesahan dipilih selepas muncul, kaedah pemadaman tertentu akan dipanggil juga. dirujuk di sini.), terutamanya digunakan untuk memaparkan maklumat kotak pop timbul, kodnya adalah seperti berikut:

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- 模态框（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">
          &times;
        </button>
        <h4 class="modal-title" id="myModalLabel">
          信息
        </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">关闭
        </button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal -->
</div>

Berikut ialah protagonis hari ini:

/**
 * 删除请求的操作
 * @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 = $('<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">&times;</button>'
    + '<h4 class="modal-title">确认删除</h4></div><div class="modal-body">'
    + '<div class="alert alert-warning">确认要删除吗？删除之后无法恢复哦！</div></div><div class="modal-footer">'
    + '<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'
    + '<button type="button" class="btn btn-success" id="deleteOK">删除</button></div></div>'
    + '</div></div>');

  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));
  });
}

Tulis penerangan gambar di sini
Tulis penerangan gambar di sini

Memandangkan terdapat banyak kod di atas, mari lihat rangka kerja mudah di bawah:

/**
 * 回调函数测试方法
 * 
 * @param callback
 * 回调的方法
 */
function testCallback(callback) {
  alert('come in!');
  callback();
}

/**
 * 被回调的函数
 */
function a() {
  alert('a');
}

/**
 * 开始测试方法
 */
function start() {
  testCallback(a);
}

Ini adalah penghujung panggilan balik saya harap ia akan membantu semua orang untuk belajar. Editor juga mempunyai pemahaman yang lebih mendalam tentang fungsi panggil balik tersuai.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Terokai keseronokan kemahiran programming_javascript berfungsi JavaScriptArtikel seterusnya：Terokai keseronokan kemahiran programming_javascript berfungsi JavaScript

Artikel berkaitan

Lihat lagi