從服務器接收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形式在客戶端上接收數據：這是jade btw。

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來發送具有定義的Callback的消息，而我只能將該數據包含在當前頁面中。

可以說我只做一個json渲染。 從服務器我發送json數據

如果成功，該函數將把數據附加到客戶端。

如何對客戶端響應進行“不重新加載” AJAX服務器？

隨時要求我進一步澄清。

根據這個

更改evt類型以更改不會影響行為。 仍然會重新加載頁面。

當前和POST頁面控制器路由都定義為'/'

更新我已經刪除了html5 onsubmit事件。 沒必要：

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

更新＃2

這不能解決我的問題

即使我添加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

我已經能夠檢查出並進行渲染，但是沒有進行部分渲染。 有誰知道如何在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);

因此，這無需渲染到新頁面即可工作。