最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

运维笔记admin13浏览0评论

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

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

我有一个患者列表,我的firebase数据库超过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 ..

回答如下:

要防止出现此类行为,您需要在按钮单击事件中添加event.preventDefault()。就像this与原生JS或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 });
发布评论

评论列表(0)

  1. 暂无评论