两种方式提交Form表单：Submit提交和Ajax提交

在做web应用时往往会用到登录和注册功能，这里以Submit提交为基础，进一步介绍了使用Ajax提交表单的一般步骤，并对比了两种方法的优缺点。

1 使用submit提交表单

使用submit提交是最常见的表单提交方式，它会将整个表单的数据一起提交到服务器端进行处理。当用户点击提交按钮或者按下回车键时，浏览器会将表单中的数据封装成HTTP请求发送给服务器。

优点

• 简单易用，只需将表单放在form标签内，并设置合适的action和method属性即可。
• 可以方便地处理文件上传等复杂数据。

缺点

• 页面会刷新，用户需要等待服务器响应，交互体验较差。
• 不适合处理多个表单的同时提交，或者需要实现动态局部刷新的场景。

示例

1.1 Form表单

<form id="register-form" action="/register" method="post">
     <h1>注册</h1>
     <div>
          <label for="username">账户</label>
          <input type="text" id="username" name="username" placeholder="请输入账户">
     </div>
     <div>
          <label for="password">密码</label>
          <input type="password" id="password" name="password" placeholder="请输入密码">
     </div>
     <div>
          <button type="submit">注册</button>
     </div>
</form>

1.2 使用Flask后端处理

from flask import request, jsonify, Flask

app = Flask(__name__)

@app.route("/register", methods=["GET", "POST"])
def register():
    if request.method == "GET":
        return render_template("pages/register.html")
    else:
        try:
            data = request.form
            username=data.get("username")
            password=data.get("password")
            print(f"username: {username}, password: {password}")
            return “注册成功”
        except Exception as e:
            return “注册失败”

后端通过request.form获取表单数据后进行处理，判断是否注册成功。

2. 使用Ajax提交表单

Ajax（Asynchronous JavaScript and XML）是一种无需刷新整个页面的异步请求技术。使用Ajax提交表单，可以在不刷新页面的情况下向服务器发送请求，并通过JavaScript动态更新页面内容。

优点

• 用户体验好，页面无刷新。
• 可以实现动态局部刷新，提升用户操作效率。

缺点

• 对于文件上传等复杂数据处理较为复杂。
• 需要编写更多的JavaScript代码。

2.1 Form表单

<form id="register-form" action="/register" method="post">
     <h1>注册</h1>
     <div>
          <label for="username">账户</label>
          <input type="text" id="username" name="username" placeholder="请输入账户">
     </div>
     <div>
          <label for="password">密码</label>
          <input type="password" id="password" name="password" placeholder="请输入密码">
     </div>
     <div>
          <button type="submit">注册</button>
     </div>
</form>

使用与1.1节相同的form表单。

2.2 JavaScript处理

document.getElementById("register-form").addEventListener("submit", function (event) {
        event.preventDefault();
        let username = $("#username").val();
        let password = $("#password").val();
        if (username.length < 6 || username.length > 32) {
            alert("账户长度必须介于6和32之间");
         }
        else if (password.length < 6 || password.length > 32) {
            alert("密码长度必须介于6和32之间");
         }
        else {
            $.ajax({
                url: "/register",
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({
                    'username': username,
                    'password': password,
                }),
                success: function (response) {
                    alert(response.message);
                    if (response.success) {
                        window.location.href = "/login";
                    }
                },
                error: function () {
                    alert('请求失败');
                }
            });
        }
    });

通过document.getElementById()函数获得表单元素，然后为该元素添加一个监听器，当监听到submit事件，执行我们定义的事件处理函数。首先通过event.preventDefault()阻止提交表单的默认提交行为，然后取出表单中用户填写的数据，使用Ajax发送异步请求，将表单数据作为请求参数发送给服务器，最后等待服务器的响应结果。

2.3 使用Flask后端处理

from flask import request, jsonify, Flask

app = Flask(__name__)

@app.route('/register', methods=["GET", "POST"])
def register():
    if request.method == "GET":
        return render_template('pages/user/register.html')
    else:
        try:
            data = request.get_json()
            username=data["username"]
            password=data["password"]
            print(f"username: {username}, password: {password}")
            return jsonify({'success': True, 'message': '注册成功'}), 200, {'ContentType': 'application/json'}
        except Exception as e:
            return jsonify({'success': False, 'message': '注册失败'}), 200, {'ContentType': 'application/json'}

后端通过request.get_json()获取数据后进行处理，判断是否注册成功。

2.4 Ajax提交表单一般步骤总结

使用Ajax提交表单的一般步骤如下

1. 监听表单的submit事件。
2. 在事件处理函数中，阻止表单的默认提交行为。
3. 使用JavaScript获取表单数据。
4. 使用Ajax发送异步请求，将表单数据作为请求参数发送给服务器。
5. 处理服务器返回的响应结果，并根据需要更新页面内容。

需要注意的是，无论使用哪种方式提交表单数据，都需要在服务器端进行相应的处理，接收并解析表单数据，并进行相应的逻辑处理。