jquery.form.js的使用（基于pug）

注：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实现了。
        });
    });
});