问题描述
我有一个表格
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调用？
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);
因此，这无需渲染到新页面即可工作。