Mithriljs:防止在提交时重新加载完整的应用程序
Mithriljs: prevent full application reload on submit
我只有一个组件,它只是一个登录表单。
当登录不成功时,出于某种原因我会重新加载完整的应用程序。
这是应用程序的主要入口。它所做的只是初始身份验证 ping。如果会话启动,它会加载实际的应用程序,否则它会安装身份验证组件,这只是一个登录表单。
var Application = {
run() {
m.request({
method: "GET",
url: cfg.apiurl("/session/ping"),
extract(xhr) {
return xhr.status > 200 ? xhr.status : xhr.responseText;
}
}).then(r => {
var init = {
uname: r.data.uname
};
router(init);
}, e => {
if (e === 401) {
m.mount(document.body, Authenticate);
}
});
}
};
Application.run();
下面是去掉视图的身份验证组件。它将登录变量绑定到视图并定义提交操作。当我 运行 使用不正确的凭据提交操作时,它会重新加载应用程序。
为什么会重新加载应用程序??
Chrome 控制台说:Navigated to http://localhost:3000/?
就在 "Login Failure !!!" 控制台消息之后。这会导致完整的应用程序重新加载。因此,任何关于错误登录的屏幕错误消息和弹出窗口都会消失。它确实将最后一条错误消息打印到控制台 "Login Failure !!!"。之后,当提交函数退出时,它导航到 URL 的根目录,导致完全重新加载。
我做错了什么?
var Authenticate = {
controller, view
};
function controller() {
this.info = m.prop("");
this.data = {
uname: m.prop(""),
passw: m.prop(""),
local: m.prop(false)
};
this.submit = () => {
Login.auth(this.data).then(r => {
if (this.data.uname() === r.data.uname) {
var init = {
uname: r.data.uname
};
router(init);
} else {
console.log("Login Mismatch !!!");
}
}, e => {
if (e === 401) {
console.log("Login Failure !!!");
popa();
} else {
console.log(`Server Errror ${e} !!!`);
}
});
};
}
非常感谢。
如果您使用 HTML form
-元素,提交总是会触发页面重新加载。你必须preventDefault
这里
m('form', {
onsubmit: function(event) {
event.preventDefault();
}, 'form content'
})
我只有一个组件,它只是一个登录表单。 当登录不成功时,出于某种原因我会重新加载完整的应用程序。
这是应用程序的主要入口。它所做的只是初始身份验证 ping。如果会话启动,它会加载实际的应用程序,否则它会安装身份验证组件,这只是一个登录表单。
var Application = {
run() {
m.request({
method: "GET",
url: cfg.apiurl("/session/ping"),
extract(xhr) {
return xhr.status > 200 ? xhr.status : xhr.responseText;
}
}).then(r => {
var init = {
uname: r.data.uname
};
router(init);
}, e => {
if (e === 401) {
m.mount(document.body, Authenticate);
}
});
}
};
Application.run();
下面是去掉视图的身份验证组件。它将登录变量绑定到视图并定义提交操作。当我 运行 使用不正确的凭据提交操作时,它会重新加载应用程序。
为什么会重新加载应用程序??
Chrome 控制台说:Navigated to http://localhost:3000/?
就在 "Login Failure !!!" 控制台消息之后。这会导致完整的应用程序重新加载。因此,任何关于错误登录的屏幕错误消息和弹出窗口都会消失。它确实将最后一条错误消息打印到控制台 "Login Failure !!!"。之后,当提交函数退出时,它导航到 URL 的根目录,导致完全重新加载。
我做错了什么?
var Authenticate = {
controller, view
};
function controller() {
this.info = m.prop("");
this.data = {
uname: m.prop(""),
passw: m.prop(""),
local: m.prop(false)
};
this.submit = () => {
Login.auth(this.data).then(r => {
if (this.data.uname() === r.data.uname) {
var init = {
uname: r.data.uname
};
router(init);
} else {
console.log("Login Mismatch !!!");
}
}, e => {
if (e === 401) {
console.log("Login Failure !!!");
popa();
} else {
console.log(`Server Errror ${e} !!!`);
}
});
};
}
非常感谢。
如果您使用 HTML form
-元素,提交总是会触发页面重新加载。你必须preventDefault
这里
m('form', {
onsubmit: function(event) {
event.preventDefault();
}, 'form content'
})