使用Intercooler.js将Ajax混入HTML

将Ajax添加到任何网站从未如此简单。 实际上， 基于称为单页应用程序（或SPA ）的 Ajax请求构建整个网站是很普遍的。

但是，这始终需要一些jQuery和一些技术上的争论才能更新页面内容 。 如果您只需要一些基本的Ajax功能 ，则可以使用intercooler.js将此功能混合到HTML中。

Intercooler使您可以编写HTML属性，这些属性本机包含Ajax请求URL 。 当用户单击某些链接时，您可以指示运行Ajax请求，而不是正常的单击操作。

所有这些都依赖于HTML5 data- *属性，例如ic-post-to 。 您可以将此属性添加到按钮或锚链接，然后它将自动连接到jQuery以进行Ajax POST请求。

插件网站上实际上有一个充满这些属性的页面。 下面是一些示例代码，以查看其外观：

<a ic-post-to="/button_click">Click Me!</a>

这会将Ajax POST请求发送到URL /buton_click ，并将响应加载到容器元素中。 Intercooler是一个非常简单的库，一旦您了解了它的工作原理，它的功能就会异常强大。

授予它不能解决您所有的Ajax问题，因为它不能自动更新页面的其他区域 。 它也不能在不减慢页面速度的情况下附加太多自定义功能 ，因此详细的SPA应该确实使用自定义Ajax代码 。

Intercooler.js提供了一种更加语义化的方式来编写Ajax代码，以便其加载甚至提供本机回退。

要安装中冷器，您只需要一个jQuery 副本以及可在GitHub上找到的中冷器库的副本 。 您甚至可以使用jQuery CDN和本地Intercooler CDN进行 测试，而无需下载任何文件。

将两者都放入页面标题中的<script>标记中 ，然后将HTML属性放置在任意位置！

快看一下演示页面 ，查看可以使用的演示的完整列表 。 我特别喜欢“单击以编辑”演示，因为该演示准确显示了该插件可能实现的功能以及可以使用的距离。

如果您想了解更多信息，请查阅完整的中间冷却器HTML属性参考指南 。 每个人都执行不同的操作，因此至关重要的是对它们全部进行研究，并确定最适合您的方案的情况。

自然，您可以在GitHub上免费找到所有源代码以及简短的安装指南 。

翻译自: https://www.hongkiat.com/blog/intercoolerjs/