在不重新加载和更新当前页面的情况下从服务器接收 ajax 回调中的数据。 Express 4 和节点

Question

我有一个表格

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

运行以下 ajax 客户端脚本以将表单数据发送到 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 方法不重新加载页面。

相反，我想知道如何以 html 形式接收客户端上的数据：顺便说一句，这是玉。

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

从控制器方法中执行类似

的操作

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

页面不应重新加载，而是在 ajax 完成它应该只需在此处包含呈现的 html 片段：

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

例如，假设您会写一篇 AJAX api 给纽约时报 NYT api 使用 jsonp 发送回你定义的回调我可以将这些数据包含在我的当前页面中。

假设我只做了一个 json 渲染。我从服务器发送 json 数据

成功后，该函数将按照我的意愿在客户端附加该数据。

我怎样做一个 'No Reload' AJAX 服务器到客户端的响应？

请随时向我询问进一步的说明。

根据

将 evt 类型更改为 change 不会影响行为。它仍然会重新加载页面。

当前和 POST 页面控制器路由都定义为 '/'

更新我删除了 html5 onsubmit 事件。不需要：

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

更新#2

This 没有解决我的问题

即使我在该脚本中的函数调用末尾添加 return false;，

控制器函数：

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

仍然重新加载页面。

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

不，它不能解决我的问题。尝试实现一个快速应用程序。您在“/”处使用以 ajax 发布到服务器的表单渲染内容，它应该从 .jade/template 文件中返回 html 片段作为 html 块返回成功的 ajax 调用并替换当前的 html 代替表单。

这是我问题的核心。

更新 #3

我已经能够检查 this out 并进行渲染，但它没有进行部分渲染。任何人都知道如何在不加载整个页面的情况下在 express 4 中使用它，并且将值返回给 ajax 调用？

Answer 1

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

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

观点是这样的，还有更多：

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

scr 是没有函数包装器的。例如：

$('#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);

因此无需呈现到新页面即可工作。

在不重新加载和更新当前页面的情况下从服务器接收 ajax 回调中的数据。 Express 4 和节点

Receive data in ajax call back from server without reloading and update current page. Express 4 and Node

javascript

ajax

node.js

express

pug