📌  相关文章
📜  在 ajax 调用后加载 switchery - Javascript (1)

📅  最后修改于: 2023-12-03 15:23:06.174000             🧑  作者: Mango

在 Ajax 调用后加载 Switchery - JavaScript

Switchery 是一个简单的 iOS 像开关按钮，它可以很容易地替换原生的 HTML 开关按钮。在这篇文章中，我们将讨论如何在 Ajax 调用后加载 Switchery。

什么是 Ajax？

Ajax 是一种使用 JavaScript 和 XML（或 JSON、HTML 或纯文本）在 Web 应用程序中进行数据交换的技术。使用 Ajax 可以在不重新加载整个页面的情况下更新部分页面内容。

什么是 Switchery？

Switchery 是一个简单的 iOS 像开关按钮，它可以很容易地替换原生的 HTML 开关按钮。它高度可配置，并且具有轻量级和易于使用的 API。

在 Ajax 调用后加载 Switchery

以下是在 Ajax 调用后加载 Switchery 的步骤：

第 1 步：引入 Switchery

将 Switchery 引入您的 HTML 文件中，并将其放在 <head> 标签中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/switchery@0.8.2/switchery.min.css" />
<script src="https://cdn.jsdelivr.net/npm/switchery@0.8.2/switchery.min.js"></script>
第 2 步：编写 Ajax 请求代码

编写发送 Ajax 请求的 JavaScript 代码，并在请求成功后执行初始化 Switchery：

$.ajax({
  url: '/your/url',
  type: 'POST',
  data: yourData,
  success: function(response) {
    $('#your-div').html(response);
    var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
    elems.forEach(function(html) {
      var switchery = new Switchery(html);
    });
  }
});

在上面的代码中，我们首先使用 jQuery 发送一个 POST 请求到指定 URL，并将响应插入到指定的 HTML 元素中。之后，我们使用 document.querySelectorAll('.js-switch') 获取所有带有 js-switch 类的 HTML 元素，并将它们转换为数组。最后，我们遍历 HTML 元素数组，并对每个元素都初始化一个 Switchery 开关按钮。

第 3 步：在 HTML 中添加 Switchery 开关按钮

在 HTML 中添加需要替换为 Switchery 开关按钮的原生 HTML 开关按钮并设置其 class 属性为 js-switch：

<input type="checkbox" class="js-switch" />
结论

在 AJAX 调用后加载 Switchery 是一项非常简单的任务。如果您遵循上述步骤，您将能够在 Ajax 调用成功后初始化 Switchery 开关按钮，使您的网站更加美观，并提供更好的用户体验。

参考链接：