SoFunction
Updated on 2025-03-01

Detailed explanation on sending and receiving front-end json data

Preface

1. JSON data reception in flask

1. Use the flask() method

Part of Python background code

from flask import Flask
from flask import jsonify
from flask import request
import json
...

# Log in@("/flask/login", methods=['POST'])
def login():
 data_ = ('data')
 data = (data)
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": (username, password, rem)}) # Return a boolean value

2. Use flask's request.get_data() method

Python background code

from flask import Flask
from flask import jsonify
from flask import request
import json
...

# Log in@("/flask/login", methods=['POST'])
def login():
 data = request.get_data()
 data = (data)
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": (username, password, rem)}) # Return a boolean value

3. Use flask's request.get_json() method

Python background code

from flask import Flask
from flask import jsonify
from flask import request

...

# Log in@("/flask/login", methods=['POST'])
def login():
 data = request.get_json()
 username = data['username']
 password = data['password']
 rem = False
 if data['remember']:
  rem = True
 return jsonify({"login": (username, password, rem)}) # Return a boolean value

2. Front-end sends json data

1. Native XMLHttp send

function login() {
 var username =("username").value;
 var password = ("password").value;
 var remember =("remember").checked;
 var xmlhttp;
 if ()
 {
  // IE7+, Firefox, Chrome, Opera, Safari browser code execution  xmlhttp=new XMLHttpRequest();
 }
 else
 {
  // IE6, IE5 browser code execution  xmlhttp=new ActiveXObject("");
 }
 =function()
 {
  if (===4 && ===200)
  {
   ...
  }
 };

 ("POST","/flask/login",true);
 ("Content-type","application/json");
 //The latter two are very important. I think many of the online uses ("username="+username+"&password="+"). In this way, you need to parse the reception and feel that it is better to send the following format directly. var data = {
  "username": username
  "password": password
  "remember": remember
 };
 var data_json = (data);
 (data_json);
}

Attachment: json data analysis

 var text = ;
 // Convert json-format strings into js objects through eval() method and parse them to get the content var result = eval("("+text+")");
 if (result) {
    
  } else {
    alert("Please enter the correct username and password");
   }

2. Ajax send

 $(document).ready(function () {
 var data = {
 "username": "adamin",
 "password": "123456789",
 "remember": true
 }
 $.ajax({
  url: "/flask/login",
  type: "POST",
  data: data,
  success: function () {
   
  }
 })
 })

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.