注：pug就相当于HTML
前端页面
//- 登陆页面的内容书写
extends ../footer
append styles
link(rel='stylesheet', href='/stylesheets/login_and_register/login_or_register.css')
append scripts
script(src='/javascripts/jquery.js')
script(src='/javascripts/jquery.form.js')
script(src='/javascripts/login_and_register/login_submit.js')
block content
#content_login_or_register
h2 登 陆
h3 Login
form(name="login" action="/api/v0/login/login_handler" method="post")#form_login_or_register
label(for="input_username_login_or_register") 用户名:
input(type="text" placeholder="请写入用户名" name="username")#input_username_login_or_register
br
label(for="input_password_login_or_register") 密码:
input(type="password" placeholder="请填入密码" name="password")#input_password_login_or_register
br
button(type="submit" value="登 陆")#button_submit_login_or_register 登 陆
br
br
br
br
前端部分的要点：要引入jquery.js和jquery.form.js，而且引入顺序不能错
注：代码中的所有地址都不用在意，只需要换为看客自己的地址就可以了
@todo 尝试一下如果submit按钮换为button按钮，还可以正常工作吗？
- 结论：这个地方提交按钮type不能用submit，必须用button。否则会导致提交进行两次！
action的地址应该是不能写错或者不写的，但是没有尝试 .
- 结论：action的用法不对。在下面的V2版本中更新。
问题：（偶现）有时候提交不走下面的ajax逻辑，而是直接访问form->action接口。
login_submit.js文件
// 处理登陆的表单提交
$(document).ready(function () {
$("#button_submit_login_or_register").click(function () {
$("#form_login_or_register").ajaxSubmit(function (result) {
if (result.code === 0) {
let operationResult = result.operationResult;
location.href = '/success?operationResult=' + operationResult;
} else {
let operationResult = result.operationResult;
let reason = result.reason;
location.href = '/fail?operationResult=' + operationResult + '&reason=' + reason;
}
});
});
});
其中的关键代码：
$(form).ajaxSubmit(回调函数：处理JSON返回值)
在这之前，通过jquery为提交按钮添加click事件
V2，解决一些存在的问题。
前端页面
//- 注册页面的内容书写
extends ../index_after_login
append styles
link(rel='stylesheet', href='/stylesheets/todo/add_todo.css')
append scripts
script(src='/javascripts/jquery.js')
script(src='/javascripts/jquery.form.js')
script(src='/javascripts/todo/add_todo_submit.js')
block todo
#content_add_todo
form#add_todo_form
label(for="todo_content")#todo_label todo:
input(type="text" placeholder="你的todo" name="todo_content")#todo_content
br
button#add_todo_submit 添 加
ajax脚本
// 处理添加todo的表单提交
$(document).ready(function () {
$("#add_todo_submit").click(function () {
$("#add_todo_form").submit(function () {
// let todo_add = $("#todo_content").val();
$(this).ajaxSubmit({
type: "post",
url: "/api/v0/todo",
// data: {todo_content: todo_add}, // 这个地方的todo_content可以自动拿到，所以不需要再传递一次
success: function (result) {
if (result.code === 0) {
let operationResult = result.operationResult;
location.href = '/success?operationResult=' + operationResult;
} else {
let operationResult = result.operationResult;
let reason = result.reason;
location.href = '/fail?operationResult=' + operationResult + '&reason=' + reason;
}
}
});
return false; // 这个地方组织的就是调用的submit函数，其实submit已经通过ajaxSubmit实现了。
});
});
});
