为什么 JS 控制器无法正确响应 jquery 调用？

Question

我四处寻找，在这里找不到解决方案。我将 Node 与 Express Handlebars 一起使用，并尝试在导航按钮上使用 jquery。

如果我在浏览器的地址栏中键入地址，routes.js 和控制器文件 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 item/1 也出现在节点控制台中，但浏览器没有更新。

有什么线索吗？

Answer 1

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

现在在其中放置一个警报并验证它是否被调用。然后您需要替换页面内容或包含元素的内容才能看到结果。

如果您想加载局部视图，可以通过多种方式进行。假设您的标记中有一个 DIV 占据了页面的一部分（或者可能是页面的大部分。

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

然后假设 url returns 是部分 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 调用？

Why does JS controller not respond correctly to jquery calls?

node.js

express

handlebars.js