接收Ajax调用从服务器返回数据，而无需重新加载和更新当前页面。防爆preSS 4和节点 [英] Receive data in ajax call back from server without reloading and update current page. Express 4 and Node

问题描述

我有一个表格

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.

据<一href="https://stackoverflow.com/questions/28123315/retrieving-data-with-jquery-ajax-without-reloading-page">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.

这篇关于接收Ajax调用从服务器返回数据，而无需重新加载和更新当前页面。防爆preSS 4和节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！