Как получить значение поля формы, используя jQuery, Ajax и Django

Question

У меня есть форма html, которая имеет четыре входа. Два из них получили форму, переданную из представления Django, а два - из предыдущего просмотра страницы через переменную Django. Эта html форма выглядит следующим образом:

<form method="POST" id="post_form" class="post_form" action="" enctype="multipart/form-data" formnovalidate >
              {% csrf_token %}


              <!-- category -->
              <div class="form-group">
                <input type="hidden" id="category" name="category" value="{{category}}"> 
              </div>

              <!-- subcategory -->
              <div class="form-group">
                <input type="hidden" id="sub_category" name="sub_category" value=" 
              {{sub_category}}"> 
              </div>

              <!-- post form field -->
              {% for field in form %}
              {% if field.name == 'title' %}
              <div class="form-group">
                <label>{{ field.label_tag }} </label>
                <input type="text" class="form-control" id="title" placeholder="title" name="title"> 
              </div>
              {% endif %}

              {% if field.name == 'content' %}
               <div class="form-group">
                 <label>{{ field.label_tag }}</label>
                 <textarea class="form-control" id="content" placeholder="description" name="content"></textarea>
               </div>
               {% endif %}
               <!-- end of form -->
              {% endfor %}

               <button type="submit" class="btn btn-primary">Submit</button>
            </form>

код jQuery следующим образом:

  <!-- to submit the post and post images forms -->
  <script type="text/javascript">
  // to submit the form and prevent the default submission
   $(document).on('submit', '#post_form', function(e) {
    e.preventDefault();

    var formData = new FormData(this);
    formData.append("category",$("#category").val());
    formData.append("sub_category",$("#sub_category").val());
    formData.append("titel",$("#title").val());
    formData.append("content",$("#content").val());


    alert(formData['category']);
    $.ajax({
        type:'POST',
        url: "{% url 'create_post' %}",
        data: formData,
        processData: false,
        cache:false,
        contentType: false,
        csrfmiddlewaretoken:'{{ csrf_token }}',


        success: function(data) {
          if ( data.result == 'success') {
            console.log(data);
            alert("Data sending was successful");
            // data= JSON.parse(data); 
            update_forum_posts(data);
          }
          else{
            console.log(data);
            alert("Data sending was unsuccessful");
          }
        },

    });
    });

    </script>

Функция просмотра выглядит следующим образом:

def create_post(request):


if request.method == 'POST': 

    print("*************" )
    print(request.method)
    print(request.is_ajax)
    print("************" )
    print('here it goes',request.POST.get('category',''))
    # to change category name into category id 
    category = request.POST.get('category')
    category = Post_Category.objects.filter(category_name=category).get()
    category = category.id

    request.POST['category'] = category


    # to change subcategory name into subcategory id 
    sub_category = request.POST.get('sub_category')
    sub_category = Post_Sub_Category.objects.filter(sub_category_name=sub_category).get()
    sub_category = sub_category.id

    request.POST['subcategory'] = sub_category



    form = ForumsPostsForm(request.POST or None)

    print(form.is_valid())
    print(form.errors)
    print (form['category'].value())
    print (form['sub_category'].value())
    print (form['title'].value())
    print (form['content'].value())


    if form.is_valid():
        new_post = form.save(commit=False)

        new_post.category = form.cleaned_data.get('category')
        new_post.sub_category = form.cleaned_data.get('sub_category')
        new_post.title = form.cleaned_data.get('title')
        new_post.content = form.cleaned_data.get('content')
        new_post.user = request.user 
        new_post.save() 



        print('saved successfully')
        ret = get_forums()

        return JsonResponse(ret, safe=False)

return JsonResponse({"error": "there was an error"}, status=status.HTTP_400_BAD_REQUEST)

это результат этой строки:

        print('here it goes',request.POST)


here it goes <QueryDict: {'csrfmiddlewaretoken': ['Y5JgtP3h1o0ceWExMW2V2zN9zQNzso86xQBEO5RpnB1S8Nu434tyHxHoAm54qVUo'], 'category': [''], 'sub_category': [''], 'title': ['amazing stuff '], 'content': ['amazing stuff ']}>

как видите, в полях 'category' и 'subcategory' нет значений

мой вопрос: почему я получил результат undefined для этой функции внутри jQuery:

        alert(formData['category']);

Также я получил сообщение об ошибке при проверке формы, сообщающее, что категория и подкатегория имеют значение null, «у них нет значений».

Как я могу исправить эти ошибки?

Answer 1

первый: если вы хотите получить идентификатор категории, почему вы не делаете это в шаблоне, во-первых, {{category.id}}, а во-вторых, вы получаете undefined, потому что FormData не словарь, в порядке чтобы получить данные из FormData, вы должны использовать FormData.get (имя_атрибута): alert(formData.get('category'))

надеюсь, это поможет вам