Передача данных из localstorage в views в Django
У меня есть функция добавляющая данные в localstorage ключ: cart; поля: name, price, image, quantity и есть страница с оформлением заказа: пользователь заполняет форму где указывает имя, фамилию, номер телефона и адрес электронной почты. Я хочу чтобы после нажатия кнопки в базу данных заносился пользователем с его корзиной которая указана в localstorage. Для этого на данный момент у меня есть две работающие модели:
class SaveOrder(models.Model):
id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
username = models.CharField(max_length=128)
surname = models.CharField(max_length=128)
number_phone = models.CharField(max_length=20)
email = models.EmailField()
def __str__(self):
return f"{self.id}"
class Meta:
verbose_name = "Пользователь"
verbose_name_plural = "Пользователи"
class Basket(models.Model):
name = models.CharField(max_length=128, default='')
quantity = models.PositiveIntegerField(default=0)
localstorage = models.ForeignKey(to = SaveOrder, on_delete=models.CASCADE)
def __str__(self):
return f"Корзина для {self.user.id}"
class Meta:
verbose_name = "Корзина"
verbose_name_plural = "Корзины"
Пользователь сохраняется но мне нужно чтобы к тому же сохранялась корзина из localstoarge которая будет связана с пользователем. Т.е при помощи JavaScripts мне нужно передать данные из localstorage в views чтобы я мог их добавить в БД
def submit_order(request):
if request.method == "POST":
username = request.POST.get("username")
surname = request.POST.get("surname")
number_phone = request.POST.get("number_phone")
email = request.POST.get("email")
if username and surname and number_phone and email:
if not is_valid_phone_number(number_phone):
return render(request, "users\order.html", {"error": "Неправильный формат номера телефона"},)
if not is_valid_email(email):
return render(request, "users\order.html", {"error": "Неправильный формат адреса электронной почты"},)
user = SaveOrder.objects.create(
username=username,
surname=surname,
number_phone=number_phone,
email=email,
)
'''Вот сюда мне нужно передать данные из localstorage чтобы как видно ниже занести в БД'''
product_name = request.POST.get('name')
quantity = request.POST.get('quantity')
basket = Basket.objects.create(
user=user,
product_name=product_name,
quantity=quantity
)
return redirect("products/")
else:
return render(request, "users\order.html", {"error": "Не все обязательные поля формы заполнены"})
else:
return render(request, "users\order.html")
Пытался реализовать сам вот js код:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('order_form').addEventListener('submit', function (event) {
event.preventDefault();
var productData = JSON.parse(localStorage.getItem('cart'));
if (productData) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit_order', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
if (xhr.status === 200) {
console.log('Данные о продукте успешно отправлены на сервер');
localStorage.removeItem('cart');
} else {
console.error('Ошибка при отправке данных о продукте на сервер');
}
};
xhr.onerror = function () {
console.error('Произошла ошибка сети');
};
var requestData = {
name: productData.name,
quantity: productData.quantity
};
xhr.send(JSON.stringify(requestData));
}
});
}); В консоли выдает ошибку 403 как я узнал это ошибка связана с тем что небезопасно передавать данные а как это исправить я не знаю. Прошу ответ на JS а не Jquery но и на нем ответы пойдут. Спасибо за любой ответ