在NodeJS中单击html链接的Ajax请求答案

【问题标题】：Ajax request on html link click in NodeJS在NodeJS中单击html链接的Ajax请求
【发布时间】：2013-08-16 00:58:38
【问题描述】：

我正在使用 nodejs 开发一个网站，该网站使用 ajax 请求从 API 中提取数据。我使用模板、.hbs 文件（index.hbs、area.hbs 等）。我的问题是我想制作一个导航栏（带有文本链接），但由于我使用模板，所以它并不容易。我需要使用ajax。我已经制作了所有必要的路线，但我需要有关链接上的 ajax 请求的帮助。我已经在互联网上搜索了答案，并尝试了很多不同的解决方案，但似乎没有任何解决我的问题。

我的导航栏代码：

<div id="navbar">
     <ul>
          <li>Companies</li>
          <li>Area</li>
     </ul>
</div>

Server.js 路由代码：

app.get('/area', routes.goToArea);

Routes.js 代码：

goToArea: function (req, res) {
            res.render('area');
        }

我认为这些方面的东西可能会起作用：

var url = "/area";
        function area() {
            $.ajax({
                url: url,
                type: 'GET',

任何帮助将不胜感激！

【问题讨论】：

有点不清楚。您想在点击导航栏链接时发出ajax 请求吗？
那么问题出在哪里？您只需要绑定这些链接的click 事件并在处理程序中发出ajax 请求。我相信这很简单。或者你想要一个样本？
是的，我真的可以使用样本。对此很新。谢谢！

标签： javascript jquery html ajax node.js

【解决方案1】：

这就是您绑定click 事件并发出ajax 请求的方式

$(document).ready(function () {
    $('.navbar a').click(function () {
        $.ajax({
            'type': 'get',
            'url': '/area',
            'success': function (data) {
                // use the data
            }
        })
    })
})

【讨论】：

【解决方案2】：

从概念上讲，我会创建在全局布局中呈现的部分布局（或 html 部分）。这个“部分”应该代表一个区域。

我在 html 中也有一个变量（id 或数据属性），它代表区域标识符。那么你可以要求类似

http://myserver.com/area/tab1 或

http://myserver.com/?area=tab1

（取决于您希望如何构建代码/路由。

然后您应该通过 ajax 请求该部分，然后“成功”将其插入到 Dom 中。

这里的文档解释了如何组装 ajax 调用：

http://api.jquery.com/jQuery.ajax/

这是一本很好的读物，可能也会有所帮助：

Express.js hbs module - register partials from .hbs file

【讨论】：