热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

本文基于作者使用Flask框架处理后端逻辑和原生JavaScript及jQuery进行前端开发的经验,详细介绍了如何在前后端之间高效地传输JSON数据。文章不仅涵盖了技术实现细节,还提供了实用的代码示例。
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('发生错误,请重试');
}
});
});
});


推荐阅读
author-avatar
dongtiankzh
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有