首页 > 解决方案 > Onchange 缺少使用 django 进行的 AJAX 验证

问题描述

我一直在尝试使用 AJAX 验证标题字段。(如果表中存在标题,则显示错误“标题已存在”)。看了很多例子,有的老了不行,有的看不懂。下面是代码,请帮忙实现。这是我的代码:-

模型.py

class Post (models.Model):
    title = models.CharField(max_length=50)
    description = models.TextField()

    def __str__(self):
        return self.title

表格.py

class postForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = (
            'title',
            'description'
        )
        widgets = {
            'title': forms.TextInput(attrs={'id': 'title', 'required': True,}),
            'description': forms.TextInput(attrs={'id': 'description', 'required': True})
        }

视图.py

def validate_title(request):
    title = request.GET.get('title', None)
    data = {
        'is_taken': Post.objects.filter(title=title).exists()
    }
    return JsonResponse(data)


class postClass(CreateView):
    template_name = 'create_post.html'
    form_class = postForm

    def create_post(self, request):
        posts = Post.objects.all()
        response_data = {}
        form = postForm()
        if request.POST.get('action') == 'post':
            title = request.POST.get('title')
            description = request.POST.get('description')

            response_data['title'] = title
            response_data['description'] = description

            Post.objects.create(
                title=title,
                description=description,
            )
            return JsonResponse(response_data)

网址.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('create/', postClass.as_view(), name='create'),
    path('validate_title', views.validate_title, name='validate_title'),
]

create_post.html

<body>
<form method="POST" id="post-form">
    {% csrf_token %}
    <div class="row" style="margin-left: 400px;margin-top: 50px">
        {{ form }}
        <button type="submit" style="margin-left: 20px" class="btn btn-primary">Submit</button>
    </div>
</form>
<div>
    {% for i in posts %}
        <label>{{ i.title }}</label>
    {% endfor %}
</div>
<script type='text/javascript'>
    $(document).ready(function () {
        $(document).on('submit', '#post-form', function (e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: '{% url "create" %}',
                data: {
                    title: $('#title').val(),
                    description: $('#description').val(),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                    action: 'post'
                },
            });
        });
    });

</script>
<script>
    $("#title").change(function () {
        var title = $(this).val();
        $.ajax({
            url: '{% url "validate_title" %}',
            data: {
                title: $('#title').val(),
            },
            dataType: 'json',
            success: function (data) {
                if (data.is_taken) {
                    alert("Title already exists.");
                }
            }
        });
    });
</script>

</body>

我尝试了很多方法,但都没有奏效。有人可以帮忙吗

标签: djangoajaxsqlite

解决方案


推荐阅读