在做web应用时往往会用到登录和注册功能，这里以Submit提交为基础，进一步介绍了使用Ajax提交表单的一般步骤，并对比了两种方法的优缺点。
1 使用submit提交表单
使用submit提交是最常见的表单提交方式，它会将整个表单的数据一起提交到服务器端进行处理。当用户点击提交按钮或者按下回车键时，浏览器会将表单中的数据封装成HTTP请求发送给服务器。
优点
简单易用，只需将表单放在form标签内，并设置合适的action和method属性即可。可以方便地处理文件上传等复杂数据。
缺点
页面会刷新，用户需要等待服务器响应，交互体验较差。不适合处理多个表单的同时提交，或者需要实现动态局部刷新的场景。
示例
1.1 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表单
使用与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提交表单的一般步骤如下
监听表单的submit事件。在事件处理函数中，阻止表单的默认提交行为。使用JavaScript获取表单数据。使用Ajax发送异步请求，将表单数据作为请求参数发送给服务器。处理服务器返回的响应结果，并根据需要更新页面内容。
需要注意的是，无论使用哪种方式提交表单数据，都需要在服务器端进行相应的处理，接收并解析表单数据，并进行相应的逻辑处理。