Wie die nächsten Daten zu laden, wenn die Schaltfläche geklickt wird

Question

Ich habe eine Liste von Patienten auf meinem firebase db mehr als 11 und was ich tun wollte, ist die erste 5 Patienten laden. aber mein Problem ist, wenn ich den nächsten Knopf klickte, lädt die Seite hier ist mein Skript. aber wenn ich /:next auf meinem Endpunkt setze, funktioniert das Skript nicht. aber wenn ich es entfernte, was geschieht, lädt es die ersten 5 Daten, aber wenn ich nächstes Knopf/prev Knopf klicke, lädt es gerade die Seite neu.

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); 
    }); 
}); 

und das ist mein json Anfrage bekommen .. localhost:8100/api/users/host?next={{next}}

der Standardwert für die nächste 0 ..

Answer 1

ein solches Verhalten zu verhindern, müssen Sie event.preventDefault() auf Ihre Schaltfläche klicken Ereignis hinzuzufügen. Genau wie this mit nativen JS oder mit jQuery.
Zweiter Punkt, um Ihre Anfrage dynamisch Daten zu ändern, müssen Sie senden json von Ihrem Server und dann parsen es vor.
Oder Sie können die gerenderte Ansicht direkt an den Client senden und dann Ihr DOM mit dieser Ansicht ändern.
Zum Beispiel wie dies mit jQuery load:

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

Oder können Sie mehrere Aktionen mit Daten über $.get() Anfragen stellen. So:

$.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 });