Как передать данные из localstorage во flask?

Добрый день дорогие друзья . Нужна Ваша помощь . Уже 3 день завис на этим.
Суть какая формируется корзина через javascript данные корзины сохраняются в localstorage
Хочу данные корзины при оформлении передать в python для сохранения в json файл на сервере.
Как передать данные из клиента на сервер.
<!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>


Код файла python приведу в коментариях не помещяется тут

  • Вопрос задан
  • 1280 просмотров
Решения вопроса 1
@mgremlin
Бизнес в и вокруг IT
На клиенте:
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);
  }


На сервере:
@app.route('/apitest', methods=['POST'])
def apitest():
        reqParams = request.get_json(force=True, silent=True)

И полное содержимое cartData из LocalStorage будет в reqParams['cartData']
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@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:OELdtt45148@136.144.31.16/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')
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы