How to pass data from localstorage to flask?

A

Anton Biryukov2018-06-22 13:27:58

Python

Anton Biryukov, 2018-06-22 13:27:58

Good afternoon dear friends . I need your help . Been stuck on this for 3 days now.
The essence of what the basket is formed through javascript, the basket data is stored in localstorage
I want to transfer the basket data to python during checkout to save it in a json file on the server.
How to transfer data from client to server.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
* {margin: 0; padding: 0;}
#wrapper {
  width: 50%;
  margin: 10px;
}
#cart_content {
  margin-top: 10px;
  padding: 5px;
  border: 1px solid #060;
}
.item_box {
  border: 1px solid #999;
  margin-bottom: 10px;
  padding: 5px;
}
.shopping_list {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}
.shopping_list td,
.shopping_list th {
  padding: 10px;
  border: 1px solid #AAAAAA;
}
.shopping_list th:last-child {
  width: 1%;
}
.shopping_list tr:last-child {
  background-color: #EDEDED;
  font-weight: bold;
}
.del_item {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f00;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
}
</style>

<body>
Привет {{ b1 }}

 {% for Katalog in b2 %}
     {{ Katalog.artikul|float }}
     <div class="item_box">
        <h3 class="item_title">{{ Katalog.name_tovar }}</h3>
        <p>Цена: <span class="item_price">{{ Katalog.artikul|float}}</span> руб.</p>
        <button class="add_item" data-id="{{ Katalog.id }}">Добавить в корзину</button>
    </div>


            {% endfor %}
 <p><button id="checkout">Оформить заказ</button> &nbsp; <button id="clear_cart">Очистить корзину</button>  <button id="test9">9999</button></p></p>
    <div id="cart_content"></div>


<script type="text/javascript">
var d = document,
    itemBox = d.querySelectorAll('.item_box'), // блок каждого товара
    cartCont = d.getElementById('cart_content'); // блок вывода данных корзины
// Функция кроссбраузерная установка обработчика событий
function addEvent(elem, type, handler){
  if(elem.addEventListener){
    elem.addEventListener(type, handler, false);
  } else {
    elem.attachEvent('on'+type, function(){ handler.call( elem ); });
  }
  return false;
}
// Получаем данные из LocalStorage
function getCartData(){
  return JSON.parse(localStorage.getItem('cart'));
}
// Записываем данные в LocalStorage
function setCartData(o){
  localStorage.setItem('cart', JSON.stringify(o));
  return false;
}
//test



// Добавляем товар в корзину
function addToCart(e){
  this.disabled = true; // блокируем кнопку на время операции с корзиной
  var cartData = getCartData() || {}, // получаем данные корзины или создаём новый объект, если данных еще нет
      parentBox = this.parentNode, // родительский элемент кнопки &quot;Добавить в корзину&quot;
      itemId = this.getAttribute('data-id'), // ID товара
      itemTitle = parentBox.querySelector('.item_title').innerHTML, // название товара
      itemPrice = parentBox.querySelector('.item_price').innerHTML; // стоимость товара
  if(cartData.hasOwnProperty(itemId)){ // если такой товар уже в корзине, то добавляем +1 к его количеству
    cartData[itemId][2] += 1;
  } else { // если товара в корзине еще нет, то добавляем в объект
    cartData[itemId] = [itemTitle, itemPrice, 1];
  }
  // Обновляем данные в LocalStorage
  if(!setCartData(cartData)){
    this.disabled = false; // разблокируем кнопку после обновления LS
    cartCont.innerHTML = 'Товар добавлен в корзину.';
    setTimeout(function(){
      cartCont.innerHTML = 'Продолжить покупки...';
    }, 500);
  }
  return false;
}
// Устанавливаем обработчик события на каждую кнопку &quot;Добавить в корзину&quot;
for(var i = 0; i < itemBox.length; i++){
  addEvent(itemBox[i].querySelector('.add_item'), 'click', addToCart);
}
// Открываем корзину со списком добавленных товаров
function openCart(e){

  var cartData = getCartData(), // вытаскиваем все данные корзины
      totalItems = '',
      totalCount = 0,
      totalSum = 0;
  // если что-то в корзине уже есть, начинаем формировать данные для вывода
  if(cartData !== null){
    totalItems = '<table class="shopping_list"><tr><th>Наименование</th><th>Цена</th><th>Кол-во</th><th></th></tr>';
    for(var items in cartData){
      totalItems += '<tr>';
      for(var i = 0; i < cartData[items].length; i++){
        totalItems += '<td>' + cartData[items][i] + '</td>';
      }
      totalSum += cartData[items][1] * cartData[items][2];
      totalCount += cartData[items][2];
      totalItems += '<td><span class="del_item" data-id="'+ items +'">X</span></td>';
      totalItems += '</tr>';
    }
    totalItems += '<tr><td><strong>Итого</strong></td><td><span id="total_sum">'+ totalSum +'</span> руб.</td><td><span id="total_count">'+ totalCount +'</span> шт.</td><td></td></tr>';
    totalItems += '<table>';
    cartCont.innerHTML = totalItems;
  } else {
    // если в корзине пусто, то сигнализируем об этом
    cartCont.innerHTML = 'В корзине пусто!';
  }
  return false;
}
// функция для нахождения необходимого ближайшего родительского элемента
function closest(el, sel) {
  if (el !== null)
  return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel));
}
/* Открыть корзину */
addEvent(d.getElementById('checkout'), 'click', openCart);

/* функция тест*/
/*JSON.parse(localStorage.getItem('cart')) */
function test4() {
   var data = JSON.parse(localStorage.getItem('cart'));
   return fs.writeFile('/', JSON.stringify(data, null, '	'), 'utf-8', cb)
   /*return alert(JSON.stringify(data));*/
}

/* test2 */
addEvent(d.getElementById('test9'), 'click', test4);


/* Удаление из корзины */
addEvent(d.body, 'click', function(e){
  if(e.target.className === 'del_item') {
    var itemId = e.target.getAttribute('data-id'),
    cartData = getCartData();
    if(cartData.hasOwnProperty(itemId)){
      var tr = closest(e.target, 'tr');
      tr.parentNode.removeChild(tr); /* Удаляем строку товара из таблицы */
      // пересчитываем общую сумму и цену
      var totalSumOutput = d.getElementById('total_sum'),
      totalCountOutput = d.getElementById('total_count');
      totalSumOutput.textContent = +totalSumOutput.textContent - cartData[itemId][1] * cartData[itemId][2];
      totalCountOutput.textContent = +totalCountOutput.textContent - cartData[itemId][2];
      delete cartData[itemId]; // удаляем товар из объекта
      setCartData(cartData); // перезаписываем измененные данные в localStorage
    }
  }
}, false);
/* Очистить корзину */
addEvent(d.getElementById('clear_cart'), 'click', function(e){
  localStorage.removeItem('cart');
  cartCont.innerHTML = 'Корзина очишена.';
});
</script>


</body>
</html>

The code of the python file I will give in the comments does not fit here

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

M

mgremlin, 2018-07-05
@iiantonii

On the client:

var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.open('POST', 'apitest');
    var data = JSON.stringify({"cartData": "cartData"});
    httpRequest.send(data);
  }

On server:

@app.route('/apitest', methods=['POST'])
def apitest():
        reqParams = request.get_json(force=True, silent=True)

And the full contents of cartData from LocalStorage will be in reqParams['cartData']

A

Anton Biryukov, 2018-06-22
@iiantonii

import os

from flask import Flask, render_template, flash, redirect, url_for, session, request, logging
from flask_sqlalchemy import SQLAlchemy
import urllib.request
from wtforms import Form, StringField, TextAreaField, PasswordField, validators
from passlib.hash import sha256_crypt
from functools import wraps
import json
from selenium import webdriver
from selenium.webdriver.common.keys import Keys

app = Flask(__name__)

app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://webadmin:[email protected]/postgres'
app.secret_key = os.urandom(24)
db = SQLAlchemy(app)

class Klient (db.Model):
    id = db.Column(db.Integer, primary_key=True)
    inn = db.Column(db.String(50))
    password = db.Column(db.String(50))


class Katalog (db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name_tovar = db.Column(db.String(150))
    kat = db.Column(db.String(150))
    artikul = db.Column(db.String(150))
    ostatok = (db.Integer)
    price = (db.Float(50, 2))
    img_links = (db.String(250))

    def __repr__(self):
        return format(self.price)


# User login
@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # Get Form Fields
        username = request.form['username']
        password_candidate = request.form['password']

        # Create cursor
        #cur = mysql.connection.cursor()
        result = Klient.query.filter_by(inn=username).first()

        # Get user by username
        #result = cur.execute("SELECT * FROM users WHERE username = %s", [username])

        if result:
            # Get stored hash
            #data = cur.fetchone()
            data = result.password
            password = data
            #print(password)
            #print('ii',password_candidate)
            #print('iiu', username)

            # Compare Passwords
            #if sha256_crypt.verify(password_candidate, password):
            if password_candidate == password:
                # Passed
                session['logged_in'] = True
                session['username'] = username

                flash('You are now logged in', 'success')
                return redirect(url_for('test1'))
            else:
                error = 'Invalid login'
                return render_template('index.html', error=error)
            # Close connection
            #cur.close()
        else:
            error = 'Username not found'
            return render_template('index.html', error=error)

    return render_template('index.html')

# Check if user logged in
def is_logged_in(f):
    @wraps(f)
    def wrap(*args, **kwargs):
        if 'logged_in' in session:
            return f(*args, **kwargs)
        else:
            flash('Unauthorized, Please login', 'danger')
            return redirect(url_for('login'))
    return wrap

# test login
@app.route('/test', methods=['GET', 'POST'])
@is_logged_in
def test1():
    b1 = session ['username']
    incomplete = Katalog.query.filter_by(kat='s').all()
    #b3 = request.get_data()
    return render_template('test.html', b1=b1, b2=incomplete)

# test login
@app.route('/test1', methods=['GET', 'POST'])

def test2():

    response1 = urllib.request.urlopen('/test')
    data = response1.json()
    print(data)
    return


# Logout
@app.route('/logout')
@is_logged_in
def logout():
    session.clear()
    flash('You are now logged out', 'success')
    return redirect(url_for('login'))

if __name__ == '__main__':

    app.run(debug='True')