버튼을 클릭하면 다음 데이터를로드하는 방법

Question

나는 11 개가 넘는 내 firebase db에 환자 목록을 가지고 있으며, 처음에는 5 명의 환자를로드하고 싶습니다. 하지만 내 문제는 내가 여기에 페이지를 다시로드하는 다음 버튼을 클릭하면 내 스크립트입니다. 하지만 내 끝점에 /:next을 입력하면 스크립트가 작동하지 않습니다. 하지만 내가 그것을 제거했을 때 처음 5 개의 데이터가로드되지만, 다음 버튼/prev 버튼을 클릭하면 페이지가 다시로드됩니다.

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 요청을받을 것입니다 .. 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 });