Question

我的火力记录器数据库中有一个超过11的患者列表，我想要做的是先加载5名患者。但我的问题是当我点击下一个按钮它重新加载页面这里是我的脚本。但是当我将/:next放在我的端点上时，脚本不起作用。但当我删除它时会发生什么，它会加载前5个数据，但当我点击下一个按钮/上一个按钮时，它只是重新加载页面。

router.get('/host/:next', function (req, res) {
    var ref = database.ref('patients').limitToFirst(5);

    var quickReplies = {
        messages: [
            {
                text:  "select now..",
                quick_replies: []
            }
        ]
    };

    var backButton = {
        "set_attributes":{
            "next":-1
        },
        "title":"\u23ea",
        "next":"0",
        "block_names":["list"]
    };

    var nextButton = {
        "set_attributes":{
        "next":1
        },
            "title":"\u23e9",
            "next":"0",
            "block_names":["list"]
    };

    ref.once('value', function (snapshot) {
        snapshot.forEach(function (childSnapshot) {
            var childKey = childSnapshot.key;
            var childData = childSnapshot.val();
            var setAttr = {
                set_attributes: {
                    title: childData.firstName,
                    next: 0
                },
                title: childData.firstName,
                next: 0,
                block_names: ['na']
            };

            quickReplies.messages[0].quick_replies.push(setAttr);
        });
        quickReplies.messages[0].quick_replies.unshift(backButton);
        quickReplies.messages[0].quick_replies.push(nextButton);
        res.send(quickReplies);
    });
});

这是我的json get请求.. localhost:8100/api/users/host?next={{next}}

下一个的默认值是0 ..

Answer 1

要防止此类行为，您需要在按钮点击事件中添加event.preventDefault()。就像使用原生JS或this的jQuery一样第二点，要使您的请求动态更改数据，您需要从服务器发送json，然后在前面解析它。
或者您可以将渲染视图直接发送到客户端，然后使用此视图更改DOM 例如，使用jQuery load：

$('body').load('<your api url which returns view');

或者您可以使用$.get()请求对数据进行更多操作。像这样：

$.get('your api url which returns view or json', function(response){
  if(response.status === 'ok'){
    // append view or parse json
  } else {
    // some error with your data
  }
}).fail(function(){ //if server responds with 500 status });

如何在单击按钮时加载下一个数据

1 个答案: