Передайте фигурные данные в Ajax в Django

Question

В моем проекте Django пользователь может добавить некоторые сохраненные продукты в базу данных. У меня есть вид, где отображаются сохраненные продукты. Пользователь может затем удалить их, если он хочет. Для этого я пытаюсь выполнить AJAX вызов.

Мой HTML:

        <div class="col-md-1 my-auto mx-auto">
         <form id="form_id" method='post'>{% csrf_token %}
          <button type="submit"><i class='fas fa-trash'></i></button>
         </form>
        </div>

Мой AJAX:

$("#form_id").on('submit', function(event) {
    event.preventDefault();    
    var product_id ='{{ saved.original_product.id }}';    
    console.log(product_id);
    var url = '/register/delete/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
             'product_id': product_id, 
             'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success'])
             console.log(product_id)
        }
    }); 
});

Мои URL .py:

def register(response):
    if response.method == 'POST':
        form = UserCreationForm(response.POST)
        if form.is_valid():
            form.save()
        return redirect("/")
    else:
        form = UserCreationForm()

    return render (response, 'register/register.html', {'form':form})

def account(request, user_id):
    sub_list = SavedProduct.objects.filter(username = user_id)
    paginator = Paginator(sub_list, 5)
    page_number = request.GET.get('page')
    saved_list = paginator.get_page(page_number) 

    context = {
        'saved_list': saved_list,              
    }
    return render(request, 'account/account.html', context)

def delete(request):
   data = {'success': False} 
   if request.method=='POST':
      product_id = request.POST.get('product_id')
      print (product_id)      
      data['success'] = True
   return JsonResponse(data)

И мой view.py:

def delete(request):
   data = {'success': False} 
   if request.method=='POST':
      product_id = request.POST.get('product_id')
      print (product_id)      
      data['success'] = True
   return JsonResponse(data)

Мой взгляд пока мало что делает, но я учусь на Ajax сейчас, и я делаю это один шаг за раз.

Теперь я хочу, чтобы мои print () и console.log () отображали значение {{ saved.original_product.id }}, потому что пока не отображаем его значение, а {{ saved.original_product.id }} литерал.

Мне кажется, проблема в моем HTML. Как передать фигурное значение в AJAX?

Answer 1

Я решил это следующим образом: поскольку AJAX не знал о существовании product_id, я передал его как значение в моем <button> и получил его, AJAX сторону, с: var product = ('#substitut').val();

my HTML:

<div class="col-md-1 my-auto mx-auto">
            <form id="form_id" method='post'>{% csrf_token %}
              <button id='substitut' type="submit" value='{{ saved.id}}'><i class='fas fa-trash'></i></button>
          </form>

my AJAX:

$("#form_id").on('submit', function(event) {
    event.preventDefault();    
    var product = $('#substitut').val();        
    console.log(product);
    var url = '/register/delete/';   
    $.ajax({        
        url: url,        
        type: "POST",
        data:{
             'product': product, 
             'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        datatype:'json',
        success: function(data) {
          if (data['success']) 
            console.log(product);
            $("#form_id").load(location.href + " #form_id");   

        }
    }); 
});

Answer 2

На самом деле product_id равно строке, а не значению переменной saved.original_product.id, которую вы ожидаете.

Изменить

var product_id ='{{ saved.original_product.id }}';

На (мы находимся в views.py файл, поэтому мы используем {{ variable }} формат

var product_id = {{ saved.original_product.id }};

И он должен работать, если у вас есть имя переменной saved с атрибутом original_product и само с атрибутом id:

var saved = {
   original_product: {
      id: "12410932192831"
   }
}