点击NodeJS中的html链接上的Ajax请求

时间:2013-08-14 07:22:57

标签: javascript jquery html ajax node.js

我正在使用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',

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:0)

这是绑定click事件并发出ajax请求

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

答案 1 :(得分:0)

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

我还会在html(id或data-attribute)中有一个表示区域标识符的变量。 然后你可以要求像

这样的东西

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