（四）Django 在线平台(通过model form实现页面ajax 提交功能)

最新推荐文章于 2024-06-21 10:00:32 发布

原创最新推荐文章于 2024-06-21 10:00:32 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

Django 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在Django项目中通过model form和Ajax实现前端页面的提交功能。首先，详细说明了url分发配置，强调在各自APP中管理urls以保持清晰。接着，展示了在项目urls配置课程机构的url，并利用namespace进行命名空间管理。然后，在organization应用中创建forms.py，编写视图函数以处理提交请求。最后，指导在org-list.html页面中编写Js代码，确保正确数据能被存储到数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

url分发配置：

url会越来越多所以需要在各自的APP中编写urls方便管理

在项目urls中配置课程机构的url

新建urls

配置前端页面跳转此处就是urls中的namespace命名空间的作用

前端页面我要学习功能实现

在organization中新建forms.py

# !/usr/bin/env python 
# -*- coding:utf-8 -*-
__author__ = '_X.xx_'
__date__ = '2018/6/9 18:52'

from django import forms
from operation.models import UserAsk
import re


class UserAskForm(forms.ModelForm):
    class Meta:
        model = UserAsk
        fields = ['name', 'mobile', 'course_name']

    def clean_mobile(self):
        """
        验证手机号码是否合法
        """
        mobile = self.cleaned_data['mobile']
        REGEX_MOBILE = "^1[358]\d{9}$|^147\d{8}$|^176\d{8}$"
        p = re.compile(REGEX_MOBILE)
        if p.match(mobile):
            return mobile
        else:
            raise forms.ValidationError(u"手机号码非法", code="mobile_invalid")

在view视图函数中编写

class AddUserAskView(View):
    """
        前端页面我要学习功能
    """

    def post(self, request):
        userask_form = UserAskForm(request.POST)
        if userask_form.is_valid():
            user_ask = userask_form.save(commit=True)
            return HttpResponse('{"status":"success"}',
                                content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"添加出错"}',
                                content_type='application/json')

在org-list.html页面中编写Js

{% block custom_js %}
<script>
    $(function(){
        $('#jsStayBtn').on('click', function(){
            $.ajax({
                cache: false,
                type: "POST",
                url:"{% url "org:add_ask" %}",
                data:$('#jsStayForm').serialize(),
                async: true,
                success: function(data) {
                    if(data.status == 'success'){
                        $('#jsStayForm')[0].reset();
                        alert("提交成功")
                    }else if(data.status == 'fail'){
                        $('#jsCompanyTips').html(data.msg)
                    }
                },
            });
        });
    })

</script>
{% endblock %}

提交正确数据会存储到数据库