Question

我一直在寻找，但在这里找不到解决方案。我正在使用Node with Express Handlebars并尝试在按钮上使用jquery进行导航。

如果我在浏览器的地址栏中键入地址，则routes.js和controller文件item.js的行为正确。但是如果我使用jquery进行调用，routes.js会正确地将消息发送到item.js，但是没有任何反应。

这里是代码的相关部分（如果这还不够，可以提供更多）：

我的按钮html：

<button class="btn btn-primary btn-lg btn-block" id="btn-item" data-id="{{item.uniqueId}}">Item</button>

我的jquery电话：

$(function(){
    $('#btn-item').on('click', function(event) {
        event.preventDefault();
        var itemId = $(this).data('id');
        console.log("I am itemId = " + itemId);
        $.get('/item/' + itemId).done(function(data) {
        });

    });
});

注意：console.log消息正确打印。

转到routes.js文件：

var item = require('../controllers/item'); //imports item module
router.get('/item/:item_id', item.index);

导入的item.js控制器文件：

var fs = require('fs');
var path = require('path');

module.exports = {
    index: function(req, res) {        
        var viewModel = {
            item: {uniqueId: 1}
        };
        console.log("In item.js!!!!");
        res.render('item', viewModel); //Handlebars file displays correctly
    }
};

此处，console.log输出也正确显示。

正如我在顶部提到的，如果我在浏览器地址栏中键入localhost：3001 / item / 1，则所有内容都会正确呈现。但是当我尝试使用jquery调用它时，我得到了所有控制台消息，并且节点控制台中也出现了一个GET项目/ 1，但是浏览器没有更新。

任何线索？

Answer 1

问题是您正确获取内容，但随后丢弃结果。你需要在完成事件处理程序中做一些你挂掉$ .get调用的事情。

现在在那里发出警报并验证它是否被调用。然后，您需要替换页面内容或包含元素的内容才能查看结果。

如果要加载局部视图，有几种方法可以执行此操作。假设你的标记中有一个DIV占据了页面的一部分（或者可能是页面的大部分。

<div id="sidePanel" class="panels" ></div>

然后假设url返回部分html视图（不是整页），那么你可以使用jQuery加载它。

$(function(){
    $('#btn-item').on('click', function(event) {
        event.preventDefault();
        var itemId = $(this).data('id');
        console.log("I am itemId = " + itemId);
        $.get('/item/' + itemId).done(function(data) {
           $('#sidePanel').html(data);
        });
        //alternate way not using get
        $('#sidePanel').load('/item/' + itemId);
        //Also, here is a neat way to use load
        //note the selector used at the end here. It is optional
        //if provided it will load the result, perform the selector
        //and only load in the content from the selected element
        $('#sidePanel').load('/item/' + itemId +' #panelSource');


    });
});

为什么JS控制器没有正确响应jquery调用？

1 个答案: