Flask与JavaScript实现前后端JSON数据交互

本文基于作者的实际开发经验，重点讨论了使用Flask框架处理后端逻辑和利用原生Javascript及jQuery进行前端开发时，如何高效地实现JSON数据的前后端交互。欢迎各位同行交流指正。

一、Flask中处理JSON数据的方法

1. 使用request.form.get()方法

这是处理表单数据的一种方式，适用于POST请求携带的数据格式为x-www-form-urlencoded的情况。

from flask import Flask, jsonify, request
import json
...
@app.route('/flask/login', methods=['POST'])
def login():
data_ = request.form.get('data')
data = json.loads(data_)
username = data['username']
password = data['password']
remember = data.get('remember', False)
return jsonify({'login': Login.login(username, password, remember)}) # 返回登录结果

2. 使用request.get_data()方法

此方法用于获取原始请求数据，适合处理JSON格式的数据。

from flask import Flask, jsonify, request
import json
...
@app.route('/flask/login', methods=['POST'])
def login():
data = request.get_data(as_text=True)
data = json.loads(data)
username = data['username']
password = data['password']
remember = data.get('remember', False)
return jsonify({'login': Login.login(username, password, remember)}) # 返回登录结果

3. 使用request.get_json()方法

这是最直接的方式，专门用于解析JSON格式的数据。

from flask import Flask, jsonify, request
...
@app.route('/flask/login', methods=['POST'])
def login():
data = request.get_json()
username = data['username']
password = data['password']
remember = data.get('remember', False)
return jsonify({'login': Login.login(username, password, remember)}) # 返回登录结果

二、前端发送JSON数据的方法

1. 使用原生XMLHttpRequest发送JSON数据

这种方法兼容性较好，适合需要支持老版本浏览器的场景。

function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var remember = document.getElementById('remember').checked;
var xhr = new XMLHttpRequest();
xhr.Onreadystatechange= function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var respOnse= JSON.parse(xhr.responseText);
if (response.login) {
// 处理成功情况
} else {
alert('请输入正确的用户名和密码');
}
}
};
xhr.open('POST', '/flask/login', true);
xhr.setRequestHeader('Content-Type', 'application/json');
var data = {
'username': username,
'password': password,
'remember': remember
};
xhr.send(JSON.stringify(data));
}

2. 使用jQuery的$.ajax方法发送JSON数据

这种方法简洁且易于使用，适合现代Web应用的快速开发。

$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault();
var data = {
'username': $('#username').val(),
'password': $('#password').val(),
'remember': $('#remember').is(':checked')
};
$.ajax({
url: '/flask/login',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(response) {
if (response.login) {
// 处理成功情况
} else {
alert('请输入正确的用户名和密码');
}
},
error: function() {
alert('发生错误，请重试');
}
});
});
});