Форма Knockout js не сохраняется в django

productscreate.html

<form>
      {% csrf_token %}
       
        <table border="1">
    <tr>
        <td>Title:
        <input type="text" name="title" id="title" data-bind="value: $data.title"></td>
        <br>
    </tr>
    <tr>
        <td>Description:
        <textarea name="description" id="description"  data-bind="value: $data.description">Description</textarea></td>
        <br>
    </tr>
    <tr>
        <td>Image:
        <input type="file" name="image" id="image" ></td>
        <br>
    </tr>
    
    <tr>
        <td><button type="button" id="submit" data-bind="click: $data.save" >Submit</button></td>
    </tr>
    
    </table>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
    <script>
      
        function getCookie(name) {
          let cookieValue = null;
          if (document.cookie && document.cookie !== '') {
              const cookies = document.cookie.split(';');
              for (let i = 0; i < cookies.length; i++) {
                  const cookie = cookies[i].trim();
                  // Does this cookie string begin with the name we want?
                  if (cookie.substring(0, name.length + 1) === (name + '=')) {
                      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                      break;
                  }
              }
          }
          return cookieValue;
      }
      const csrftoken = getCookie('csrftoken'); 
    </script>
    <script type="text/javascript">
    
      var ViewModel = function () {
    
        var self = this;
        self.title = ko.observable("");
        self.description = ko.observable("");
     
    
        var PerData = {
            name: self.name,
            description: self.description,
      
        };
    
        self.save = function () {
            //Ajax call to Insert the Employee
            $.ajax({
                type: "POST",
                url: '{% url "productscreate" %}',                                             
                data: PerData,
                contentType: "application/json",
                headers: {'X-CSRFToken': csrftoken},
                //cache: false,
                mimeType: "multipart/form-data",
                //processData: false,
                success: function () {
                  window.location = '{% url "productslist" %}'; 
                },
                error: function () {
                    alert("fail");
                }
            });
        };
        };
        ko.applyBindings(new ViewModel())
      
        </script>

views.py

class ProductsList(ListView):
     model = products
     context_object_name = 'products'
     template_name = "productslist.html"  
    

class ProductsCreate(CreateView):
    model = products
    fields = ['title','description','image']
    template_name = "productscreate.html"     
    success_url=reverse_lazy('productslist')


class ProductsDetailView(DetailView):
     template_name = "productsdetail.html"
     queryset = products.objects.all()
     context_object_name = 'products'
     model = products

Когда я нажимаю кнопку отправки, она показывает успешный результат, но данные формы не сохраняются Когда я создаю новый продукт с помощью формы, он должен отображаться на странице списка продуктов Как это сделать? В чем проблема в этом коде У меня есть html страница с knockout js и ajax. Пожалуйста, помогите мне решить эту проблему Заранее спасибо

Вернуться на верх