我似乎无法正确地调用AJAX。还有其他QA处理$.ajax()
函数,但我试图用$.post()
来解决这个问题。
单击表单按钮时,将执行头部的javascript,其中包含$.post()
。网址/login
被路由并传递给loginPost
函数。确定响应并将其发送回javascript(对吗?)。相反,网页呈现响应(传递||失败)。
为什么AJAX调用的响应不会被回送以进行处理?
这是一个简单的例子,我正在努力让我更好地了解expressJS和jQuery中的AJAX如何工作。任何帮助是极大的赞赏!
- 的视图/ login.jade
script(src='/_js/jquery-1.8.2.min.js')
script
$(document).ready(function(req, res) {
$('#login').submit(function() {
var formData = $(this).serialize();
console.log(formData);
$.post('/login', formdata, processData).error('ouch');
function processData(data, status) {
console.log(status);
console.log(data);
if (data == 'pass') {
$('#content').html('<p>You have successfully loggin in!</p>');
} else {
if (! $('#fail').length) {
$('#formFrame').prepend('<p id="fail">Incorrect login information. Please try again)</p>');
}
}
} //end processData
}); //end submit
}); //end ready
div.main
h1= title
div#formFrame
form(id='login', action='/login', method='POST')
p
label(for='username') Username:
input(id='username', type='text', name='username')
p
label(for='password') Password:
input(id='password', type='password', name='password')
p
input(id='button', type='submit', name='button', value='Submit')
- routes / index.js
app.post('/login', loginPost);
- routes / loginPost
module.exports.loginPost = function(req, res) {
var password = 'admin'
, username = 'user'
, data = req.body;
if (data.username == username && data.password == password) {
res.send('pass');
} else {
res.send('fail');
}
};
答案 0 :(得分:8)
您仍然必须阻止<form>
通过其默认操作提交,这可以通过event.preventDefault()
完成:
$('#login').submit(function(evt) {
evt.preventDefault();
// ...
});
否则,<form>
会将页面重定向到其action
(如果没有给出action
,则返回当前地址),从而中断$.post
请求。< / p>