javascript - 使用 django 和 AJAX 在填充字段中提交表单后，“此字段为必填项”

Question

过去几天我一直在尝试将 ajax 添加到我的 django 项目中，但我发现表单提交和数据显示存在问题。当我提交只有一个字段的 POST 表单（需要 =True）时，它不会将该表单识别为有效表单（如果不传递 .is_valid），并且表单错误显示“此字段是必需的”：

表格.py

enter code here

from django import forms
import datetime

class FriendForm(forms.Form):
      
    name = forms.CharField( required=True,  widget=forms.TextInput(attrs={'class': 'special', 'id':'id_name', 'name':'name'}))
    

视图.py

from django.http import JsonResponse, HttpResponse
from django.shortcuts import render
from django.core import serializers
from .forms import FriendForm, form_busqueda_address
from .models import Friend
import json
import requests
from decimal import Decimal
import decimal

def indexView (request):
    form = FriendForm ()
    friends = Friend.objects.all ()
    return render (request, "index.html", {"form": form, "friends": friends})



def searchFriend(request):
    form = FriendForm ()
    if request.method =="POST":
        form = FriendForm (request.POST)
        
        if form.is_valid():
            form = FriendForm (request.POST)
            name = form.cleaned_data['name']
            query = Friend.objects.filter(nick_name=name)
            responseData = serializers.serialize('json', list(query))
            return JsonResponse(responseData, safe=False)

        else:

            print(form.errors)
            query = {
                        'errors': form.errors,
                    }
            return HttpResponse(json.dumps(query), content_type="application/json")

main.js

$(document).ready(function(){
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var 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;
    }
    var csrftoken = getCookie('csrftoken');
 
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
});


var getData;


        $("#form1").submit(function(e) {// catch the form's submit event
        e.preventDefault();
        var search = $("#id_name").val();
        
        var $content = $('#display');
            $.ajax({ // create an AJAX call...
                type: 'post',
                data: $(search).serialize(),
                dataType: 'json',
                url: "search/ajax/friend/",
                success: function(query) { // on success..
                   

                    console.log(query)
             
                
                }
            });
            
        });

        $("#form-ajax").submit(function(e) { // catch the form's submit eve
        e.preventDefault();
        console.log('ok')
                });
          
            
   

索引.html

<div class="col-md-6">
    <div class="form-group">
    <form method="post" id="form1"  enctype="multipart/form-data"> 
        {% csrf_token %}

        <table>
            {{form.as_table}}
        </table>
        <button type="submit"  value="Submit">Submit</button>
    </form>
    </div>
</div>
<div class="col-md-6">
    

编辑 1：

我修改了 main.js 以更改 .serialize() 指向的位置，并且还删除了 csrf 令牌功能。当前的 main.js 是：

    $("#form1").submit(function(e) {// catch the form's submit event
    e.preventDefault();
    var search = $("#id_name").val();
    
    var $content = $('#display');
        $.ajax({ // create an AJAX call...
            type: 'post',
            data: { 'search' :  $(this).serialize(),
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()},
            dataType: 'json',
            url: "search/ajax/friend/",
            success: function(query) { // on success..
               

                console.log(query)
         
            
            }
        });
        
    });

如果我们去浏览器，我们可以看到以下内容：

在此处输入图像描述

看起来表单实际上正在获取字段信息，但无论出于何种原因，我认为它是空的。

标签： javascriptpythondjangoajaxfrontend