我有一个表格

form#form-reflow(action='/', method='post', 
                    onsubmit="docreflow()")
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit") 

运行下面的AJAX客户端脚本将表单数据发送到防爆preSS。

that runs the following ajax client script to send the form data to Express.

function docreflow() {
    $('#form-reflow').on('submit', function (evt) {
        evt.preventDefault();

        $.post($('#form-reflow').attr( 'action' ),
            {  
                data: $("#textinp").val(),
                headers: {'X-Requested-With': 'XMLHttpRequest'},
                dataType: 'text',
                accepts: {
                            text: 'text/plain'
                        },
            })
            .done(function onDone (data) {
                            console.log("returned data is: ");
                            var data = JSON.parse(data).data;
                            console.log(data);
                            $('#form-reflow').html(data);
                        }
            )
            .fail(function onFail(err) {
                $('#form-reflow').html("<p> There Wazza Khold Dey</p>");
            });
    })
}

我希望服务器POST方法不重新加载页面。

I want the server POST method to not reload the page.

相反，我想知道我怎么可以接收数据在客户端上回为一个html： 这是玉BTW。

Instead I want to know how can I receive the data on the client back as an html: this is jade btw.

div#ajaxMsg
    p It actually works!
    p Data is "#{data}"

从控制器的方法，而它确实是这样

from the controller method while it does something like

res.render('afterReload.jade', {some data...})

该页面不应该重新加载，而不是对AJAX做它应该 只是包括渲染HTML片段在这里：

The page should not reload instead on ajax done it should just include that rendered html snippet here:

$('#form-reflow').html(data);

有关，例如，请考虑你会写一个AJAX API以纽约时报 纽约时报API使用JSONP来sendback你定义的回调 我可以只包括在我的当前页面的数据。

For eg, consider you would write an AJAX api to New york times the NYT api uses a jsonp to sendback with your defined Callback and I can just include that data in my current page.

可以说，我做的只是一个JSON渲染。从服务器我送JSON数据

Lets say I do a json rendering only. from the server I send the json data

和成功，该函数将追加在客户端的数据，我想。

and on success, the function will append that data on client side as I wish.

我如何做一个无刷新AJAX服务器到客户端的响应？

How can I do a 'No Reload' AJAX server to client response?

随时问我要进一步明晰。

Feel free to ask me for further clarity.

据this

改变EVT类型来改变不影响行为。它仍然重新加载页面。

changing the evt type to change doesn't affect the behaviour. it still reloads the page.

无论是当前和POST页控制器路由被定义为/

Both the current and POST page controller routes are defined to be '/'

更新 我已删除了HTML5 onsubmit事件。没有必要：

UPDATE I have removed the html5 onsubmit event. no need:

  form#form-reflow(action='/', method='post')
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit")  

更新＃2

这不解决我的问题。

即使我添加了一个返回false; 在该脚本函数调用结束，

even if I add a return false; at the end of the function call in that script,

控制器功能：

function ajaxReq(req, res) {

            console.log(req.body);

            if (req.accepts('text')) {
                //#TODO: do something with this to doc reflow instead page reload
                res.json({data: req.body.textinp});
            }
        };

还是重新加载页面。

still reloads the page.

我不同意@mccannf的指出其重复的。

I disagree with @mccannf for pointing out that its a duplicate.

没有它不解决我的问题。尝试实施的前preSS应用程序。在那里你呈现的东西在'/'与形式，职位与阿贾克斯到服务器，它应该呈现返回一个HTML代码片段，说.jade /模板文件，一个HTML块回成功的Ajax调用，并取代现有的HTML代替的形式。

No it doesn't solve my problem. Try implementing an express app. where you render something at '/' with a form that posts with ajax to server and it should render back an html snippet from, say a .jade/template file, as an html chunk back to the successful ajax call and replace the current html in place of form.

这是我的问题的核心。

更新＃3

我已经能够检查了这一点并做渲染但它不是做局部呈现。 任何人都知道如何使用它在EX $ P $ 4 PSS无需加载整个页面， 返回值的AJAX调用？

I have been able to check this out and do a rendering but its not doing a partial rendering. Anyone knows how to use it in express 4 without loading the whole page and returning value to ajax call?

推荐答案

这解决了我的问题，现在是一个工作页面：

This solves my problem and now it is a single working page:

script(src="js/scr.js")

的看法是这一点，更多的东西：

the view is this and something more:

form#form-reflow(action='/scr')
    input#textinp(type="text", name="textinp")
    input#submit(type="submit", name="submit")

SCR这是没有功能的包装。对于例如：

scr is this without a function wrapper. for eg:

$('#form-reflow').submit(function (e) {
        e.preventDefault();
        var posting = $.post( $('#form-reflow').attr( 'action' ), 
            {data:$("#textinp").val()
            })
        posting.done(
            function onDone (val) {
                $("#form-reflow").removeAttr('action');
                $("#form-reflow")
                .html("<p> hello baby " + val.data + "</p>");
                });
        return false;
    });

控制器是：

some_controller = function some_controller(req, res) {


            if (req.accepts(['json', 'jsonp'])) {


                res.setHeader("Content-Type", "application/json");

                var json_data = {data: req.body.data,
                                };
                res.jsonp(json_data);

            }
        };
app.use('/', some_router);
some_router.post('/scr',some_controller);

所以这个工作没有渲染到了新的一页。

So this works without rendering to a new page.