• 查的views层写法

def index(request):
    obj_list = models.UserInfo.objects.all()
    return render(request,"index.html",{"userinfo":obj_list})

• 增加的views层写法

• GET请求时

因为django_form表单都已经提前生成了标签，所以要做的就是，创建生成的form对象下面的例子的中的user_form = UserForm()

• POST请求时

在这里使用第二个特性可以验证表单，因此把我们request.post传入创建的验证表单中,因为他本身返回的就是字典，form表单生成的标签name属性也是和创建的类属性名一致。
然后利用is_valid()判断字段是否符我们写的判断需求，符合需求返回True
cleaned_data会吧符合需求的数据封装成字典传入给数据库
如果is_valid()为假，那么会把用户填的数据再返还，同时出现错误信息

def add_user(reuqest):
    if reuqest.method == "GET":
        user_form = UserForm()
        return render(reuqest,'adduser.html',{'user_form':user_form})
    elif reuqest.method == "POST":
        user_form = UserForm(reuqest.POST)
        if user_form.is_valid():
            UserData = user_form.cleaned_data
            '''
            models.UserInfo.objects.create(
                usernmae = UserData['username'],
                email = UserData['email']
            )
            '''
            models.UserInfo.objects.create(**UserData)
            return redirect('/index/')
        else:
            return render(reuqest, 'adduser.html', {'user_form': user_form})

• 增加htm

在这里分别调用了对应标签的字段名

<form method="post" action="/add_user/" novalidate>
    {% csrf_token %}
    <p>{{ user_form.usernmae }}{{ user_form.errors.usernmae.0 }}</p>
    <p>{{ user_form.email }}{{ user_form.errors.email.0 }}</p>
    <input type="submit">
</form>

• 编辑

def edit(reuqest,nid):

    if reuqest.method == "GET":
        data = models.UserInfo.objects.filter(id=nid).first()
        obj = UserForm({"usernmae":data.usernmae,"email":data.email})
        return render(reuqest,'edit.html',{'obj':obj,'nid':nid})
    elif reuqest.method == "POST":
        obj = UserForm(reuqest.POST)
        if obj.is_valid():
            print(nid)
            pbj_u = models.UserInfo.objects.filter(id=nid).update(**obj.cleaned_data)
            print(models.UserInfo.objects.filter(id=nid))
            return  redirect('/index/')
        else:
            return render(reuqest, 'edit.html', {'obj': obj,'nid':nid})

二、ajax提交

这里要先明确只有当执行了is_valid 时触发验证_clean_fields,将数据进行处理以字典的形式封装好，通过cleaned_data接受处理好的内容后。
这里说一下ajax的思路，首先我们构造一个ret={'status':True,'message':None }作为钥匙，用来告诉ajax我们请求是可以通过的，当失败的时候由于errors方法，最后的是继承了dict属于基本类型，我们可以将它保存到我们的钥匙中，通过json返回页面

def index(request):
    if request.method == "GET":
        obj_UserInfo = UserIn()
        return  render(request,"index.html",{"UserInfo": obj_UserInfo})
    elif request.method == "POST":
        ret = {'status':True,'message':None }
        obj_UserInfo = UserIn(request.POST)
        #当执行is_valid 时触发验证_clean_fields方法s
       
        if obj_UserInfo.is_valid():
            return  HttpResponse(json.dumps(ret))
        else:
            #from django.forms.utils import ErrorDict /class ErrorDict(dict):

            ret['message'] = obj_UserInfo.errors
            ret['status'] = False
            return HttpResponse(json.dumps(ret))

• html_ajax写法

<form id="fm" novalidate >
        {% csrf_token %}
        <p>{{ UserInfo.username }}<span class="us_error"></span></p>
        <p>{{ UserInfo.pwd }}<span class="pw_error"></span></p>
        <p>{{ UserInfo.phone }}<span class="pw_phone"></span></p>
        <a id="adduser" href="#">提交</a>
    </form>

<script src="/static/jquery-1.12.4.js"></script>

• ajax
  这里的jquery下面错误展示 应该进一步处理，如果某个条件符合就不会出现数值，会差生js报错

<script>
    $(function () {
        addUser();
    })
    function addUser() {
        $('#adduser').click(function () {
            $.ajax(
                {
                    url:'/index.html',
                    type:'POST',
                    data:$('#fm').serialize(),
                    dataType:'JSON',
                    success:function (arg) {
                        if(arg.status){
                            window.location.href="http://www.baidu.com"
                        }else {
                            $('.us_error').text(arg.message.username[0]);
                            $('.pw_error').text(arg.message.pwd[0]);
                            $('.pw_phone').text(arg.message.phone[0]);

                        }
                    }
                }
            )
        })
    }
</script>