【Django在线教育平台】08.学习咨询表单ajax提交

专题：Django2.0.8+xadmin2实现在线学习网站

Django2.0.8+xadmin2实现在线学习网站，课程、讲师、机构、用户收藏功能。GitHub地址：https://github.com/xyliurui/OnlineLearningPlatform ；Django版本：2.0.8

更多内容请点击 我的博客 查看，欢迎来访。

学习咨询表单提交

对应表userask

form会对字段先做验证，然后保存到数据库中。

可以看到我们的forms和我们的model中有很多内容是一样的。我们如何让代码重复利用呢？

使用ModelForm解决这个问题。

创建学习咨询表单UserAskForm(forms.ModelForm)

organization/forms.py 创建表单

from django import forms

from operation.models import UserAsk


# 学习咨询Form
class UserAskForm(forms.ModelForm):
    class Meta:
        model = UserAsk
        fields = ['name', 'mobile', 'course_name']  # 需要验证的字段

每个app配置各自的url

创建organization/urls.py

from django.urls import path, re_path

from organization.views import OrgListView


urlpatterns = [
    # 课程机构列表url
    path('list/', OrgListView.as_view(), name="org_list"),
]

修改主url关于机构的配置

urlpatterns = [
    path('admin/', admin.site.urls),
    path('xadmin/', xadmin.site.urls),
    path('', TemplateView.as_view(template_name='index.html'), name='index'),
    # path('login/', TemplateView.as_view(template_name='login.html'), name='login'),
    # path('login/', user_login, name='login'),
    path('login/', LoginView.as_view(), name='login'),  # 基于类方法实现登录,这里是调用它的方法
    path('register/', RegisterView.as_view(), name='register'),
    re_path('register/active/(?P<active_code>.*)/', ActiveUserView.as_view(), name='user_active'),  # 激活
    path('captcha/', include('captcha.urls')),
    path('forgetpwd/', ForgetPwdView.as_view(), name='forgetpwd'),  # 忘记密码
    re_path('forgetpwd/reset/(?P<active_code>.*)/', RestpwdView.as_view(), name='resetpwd'),  # 密码重置验证
    path('modify_pwd/', ModifypwdView.as_view(), name="modify_pwd"),  # 密码修改

    # path('org/list/', OrgListView.as_view(), name="org_list"),  # 机构列表
    # 课程机构url配置
    path('org/', include('organization.urls', namespace='org')),
]

为了防止冲突，添加命名空间org，然后注释掉以前的org_list

但是运行出错如下

django.core.exceptions.ImproperlyConfigured: Specifying a namespace in include() without providing an app_name is not supported. Set the app_name attribute in the included module, or pass a 2-tuple containing the list of patterns and app_name instead.

解决办法，在自己的app下的urls中写上app_name

from django.urls import path, re_path

from organization.views import OrgListView

app_name = 'organization'

urlpatterns = [
    # 课程机构列表url
    path('list/', OrgListView.as_view(), name="org_list"),
]

修改之后仍然可以通过以前的链接访问 http://127.0.0.1:8000/org/list/

提交学习咨询视图AddUserAskView(View)

比较合理的操作是异步的，不会对整个页面进行刷新。

如果有错误，显示错误。一种ajax的异步操作。

因此我们此时不能直接render一个页面回来。

应该是给前端返回json数据，而不是页面

HttpResponse类指明给用户返回哪种类型数据

from django.shortcuts import render, HttpResponse
from .forms import UserAskForm


# 用户咨询表单提交
class AddUserAskView(View):
    def post(self, request):
        userask_form = UserAskForm(request.POST)
        # 判断form是否有效
        if userask_form.is_valid():
            # 这里是modelform和form的区别
            # 它有model的属性
            # 当commit为true进行真正保存
            userask_form.save(commit=True)
            # 这样就不需要把一个一个字段取出来然后存到model的对象中之后save

            # 如果保存成功,返回json字符串,后面content type是告诉浏览器的
            return HttpResponse('{"post_statue": "success", "msg": "Tips：提交成功"}', content_type='application/json')
        else:
            # 如果保存失败，返回json字符串,并将form的报错信息通过msg传递到前端
            return HttpResponse('{"post_statue": "fail", "msg": "Tips：添加出错"}', content_type='application/json')

提交用户咨询url

from django.urls import path, re_path

from organization.views import OrgListView, AddUserAskView

app_name = 'organization'

urlpatterns = [
    # 课程机构列表url
    path('list/', OrgListView.as_view(), name="org_list"),
    path('add_ask/', AddUserAskView.as_view(), name='add_ask'),
]

提交咨询模板表单

<form role="form" id="contact_form" class="contact-form" method="post" autocomplete="off">
    <!-- Payment information -->
    <h5>学习咨询<small id="contact_form_error"></small></h5>
    <ul class="row">
        <li class="col-sm-12">
            <label>
                <input type="text" class="form-control" name="name" placeholder="名字">
            </label>
        </li>
        <li class="col-sm-12">
            <label>
                <input type="text" class="form-control" name="mobile" placeholder="联系电话">
            </label>
        </li>
        <li class="col-sm-12">
            <label>
                <input type="text" class="form-control" name="course_name" placeholder="咨询课程">
            </label>
        </li>
        {% csrf_token %}
        <li class="col-sm-12 no-margin">
            <button type="button" value="submit" class="btn-round" id="contact_form_btn">立即咨询</button>
        </li>
    </ul>
</form>


<script>
    $(function(){
        $('#contact_form_btn').on('click', function(){
            $.ajax({
                cache: false,
                type: "POST",
                url:"{% url "org:add_ask" %}",
                data:$('#contact_form').serialize(),
                async: true,
                success: function(data) {
                    if(data.post_statue === 'success'){
                        $('#contact_form')[0].reset();
                        $('#contact_form_error').html(data.msg)
                    }else if(data.post_statue === 'fail'){
                        $('#contact_form_error').html(data.msg)
                    }
                },
            });
        });
    })
</script>

BLOG_20190604_140038_23

监听这个button，用户如果点击了button。来向这个url进行post请求。
将我们的表单进行序列化。

form表单添加crsf_token

如果后台返回的状态值为success，那么我们将弹出提交成功。失败，就会在错误提示框中写入。

Form手机号正则验证

organization/forms.py

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[345678]\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")