Ajax与node.js / jade


                    

我正在寻找一种使用node.js上运行的ajax,express和jade作为模板引擎而不路由到子页面的方法。 我读了这篇文章: Node,Express,Ajax和Jade Example </ p >

但这对我不起作用。 我不想路由到页面的一部分,因此用户可以访问部分页面。 我只想在网站的一部分中提供一个人造翡翠文件。</ p>

我考虑这样的事情:</ p>

  $(“ .trigger”).on(“ click”,function(){
     $(“ .result”).load(“ ajax / test.jade”);
});
</ code> </ pre>

如何在不设置node.js路由的情况下执行此操作,以便用户可以访问子页面而无需访问整个页面。</ p>

谢谢您的回答。</ p>
     </ div>

展开原文

原文

I'm searching for a way to use ajax running on node.js, express and jade as template-engine without routing to subpages. I read this: Node, Express, Ajax, and Jade Example

But this doesn't work for me. I don't want to make a route to a partial part of page, so the user could access the partial page. I just want to serve a convertet jade file in a part of the website.

I think about something like this:

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

How could I do this without setting a route in node.js so the user could access the subpage without accessing the whole page.

Thank you for your answers.

4个回答


如果将文件作为GET参数发送怎么办:</ p>

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

app.get('/ ajax',function(req,res){
     fs.readFile(req.query.file,'utf8',function(err,data){
         如果(err)抛出err;
         var fn = jade.compile(data);
         var html = fn({});
         res.send(html);
     });
});
</ code> </ pre>

并发送请求</ p>

  /ajax?file=test.jade
</ code> </ pre>

如果您那样做,您将只有一条路线。</ p>
     </ div>

展开原文

原文

What if you send the file as a GET parameter:

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

and send request like

/ajax?file=test.jade

If you do the things like that you will have only one route.


(仍然需要一条路由,但是)您可以设置一条路由,如果它是ajax请求,则仅提供有效的响应;否则,则为4xx。</ p>

  app.get('/ path',function(req,res){
   如果(req.xhr)
   {
     ...
   }
});
</ code> </ pre>

req.xhr </ code> Express 文档。</ p> >
     </ div>

展开原文

原文

(Still requires a route but) You could set up a route that only provides a valid response if it is an ajax request, and a 4xx if otherwise

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

req.xhr Express docs.


您可以</ em>将玉模板(或HTML文件)放置在网站上的公共文件夹中,前提是您已进行设置。</ p>

例如,在app.js中:</ p>

  app.use(express.static(__ dirname +'/ public'));
</ code> </ pre>

将模板/文件放置在(或任何子文件夹中):</ p>

  /public/example.html
</ code> </ pre>

然后,您可以使用 $。get </ code>加载文件,就像您提供的链接一样:</ p>

  $。get('/ example.html',function(result){
     $('#test')。html(result);
});
</ code> </ pre>
     </ div>

展开原文

原文

You could place a jade template (or HTML file) in the public folder on your website, assuming you have it set up.

For example, in the app.js:

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

Place the template/file in (or any subfolder):

/public/example.html

Then you can use $.get to load the file, like the link you provided:

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


我对ajax调用有疑问</ p>

服务器端:</ p>

  router.get('/ user / letterlist',function(req,res){
     // ...一些操作
     res.render('userLetterList',{标题:'test',行:行?行:null,pageCount:pageCount,itemCount:itemCount});
});
</ code> </ pre>

客户端index.jade </ p>

 扩展布局
阻止内容
div(id =“ userLettersList”)
     button(type =“ button” class =“ btn btn-success”)
         {成功}
脚本。
     $(“。btn”)。click(function(e){
         e.preventDefault();

         $ .ajax({
             网址:“ / user / letterlist”,
             成功:功能(数据){
                 $(“#userLettersList”)。html(data);
             }
         });
     });
</ code> </ pre>

客户端userLetterList.jade </ p>

  table(id =“ UserLetters” class =“ table table-striped table-bordered”)
   Thead
    ....
</ code> </ pre>

问题是当按下按钮将数据加载到div中时,它将检索并显示,但是页面会在数毫秒后重定向到无人的空白页面。</ p>
     </ div>

展开原文

原文

I have a problem with ajax call

Server side:

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

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

client side userLetterList.jade

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

The problem is when push on the button to load data into the div, it will retrieve and show, but the page redirect to nowhere with a blank page, after some m-seconds.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐