Ajax with node.js/jade

Question

서브 페이지로 라우팅하지 않고 node.js, express 및 jade에서 실행중인 ajax를 템플릿 엔진으로 사용하는 방법을 찾고 있습니다. 나는 이것을 읽었다 : Node, Express, Ajax, and Jade Example

그러나 이것은 나를 위해 작동하지 않는다. 페이지의 일부분에 대한 경로를 만들고 싶지 않아 사용자가 부분 페이지에 액세스 할 수 있습니다. 나는 단지 웹 사이트의 한 부분에 convertet jade 파일을 제공하고 싶다.

나는 이런 식으로 뭔가에 대해 생각 :

$(".trigger").on("click", function() { 
    $(".result").load("ajax/test.jade"); 
}); 

어떻게 사용자가 전체 페이지에 액세스하지 않고 서브 페이지에 액세스 할 수 있도록 Node.js를에 경로를 설정하지 않고이 작업을 수행 할 수 있습니다.

답장을 보내 주셔서 감사합니다.

Answer 1

.

Answer 2

당신은 그것이 아약스 요청이있는 경우에만 유효한 응답을 제공하는 경로 및 4XX, 그렇지 않으면

app.get('/path', function(req, res) { 
    if(req.xhr) 
    { 
    ... 
    } 
}); 

req.xhr 익스프레스 docs을 설정할 수 있습니다 (정지 경로를 필요로하지만).

var jade = require('jade'), 
    fs = require('fs'); 

app.get('/ajax', function(req, res) { 
    fs.readFile(req.query.file, 'utf8', function (err, data) { 
     if (err) throw err;  
     var fn = jade.compile(data); 
     var html = fn({}); 
     res.send(html); 
    }); 
}); 

하고 일을 할 경우

/ajax?file=test.jade 

같은 요청을 보내 당신이 하나의 경로가됩니다 그렇게 : 당신이 GET 매개 변수로 파일을 전송하면 어떻게

Answer 3

웹 사이트의 공용 폴더에 jade 템플릿 (또는 HTML 파일)을 설치했다고 가정합니다. app.js에서 예를 들어

:

app.use(express.static(__dirname + '/public')); 

장소 템플릿 /에서 파일 (또는 하위 폴더) :

/public/example.html 

그런 다음 파일을로드 할 수 $.get을 사용할 수 있습니다, 같은 당신은 제공된 링크 :

$.get('/example.html', function(result) { 
    $('#test').html(result); 
}); 

Answer 4

나는 아약스 호출에 문제가

,

서버 측 :

router.get('/user/letterlist', function(req, res) { 
    // ... some operations 
    res.render('userLetterList', { title: 'test', rows : rows? rows: null, pageCount: pageCount,itemCount: itemCount }); 
}); 

클라이언트 측 index.jade

extends layout 
block content 
div(id="userLettersList") 
    button(type="button" class="btn btn-success") 
     {success} 
script. 
    $(".btn").click(function(e){ 
     e.preventDefault(); 

     $.ajax({ 
      url: "/user/letterlist", 
      success: function(data){ 
       $("#userLettersList").html(data) ; 
      } 
     }); 
    }); 

클라이언트 측 userLetterList.jade

table(id="UserLetters" class="table table-striped table-bordered") 
    thead 
    .... 

버튼 누름이로 데이터를로드 할 때 문제 div, 그것은 검색하고 보여줄 것이지만, 페이지는 m-seconds 후에 빈 페이지가없는 곳으로 리디렉션됩니다.