zoukankan      html  css  js  c++  java

  • 循序渐进Python3（十三） --1-- django之form表单

    在上一次的代码上做出进一步修改,使之能在页面上显示报错信息。
    views.py
    1. from django.shortcuts import render, HttpResponse
    2. from django import forms
    3. import json
    4. # Create your views here.
    7. class InputForm(forms.Form):
    8.     # 下面使用的变量名必须和html中input标签的name值相同
    9.     username = forms.CharField(required=True)
    10.     password = forms.CharField(required=True)
    13. def login(request):
    14.     if request.method == 'POST':
    15.         result = {'status':False, 'message':None}
    16.         obj = InputForm(request.POST)
    17.         ret = obj.is_valid()
    18.         # print(ret,obj.data)
    19.         if ret:
    20.             print(obj.clean())
    21.             result['status'] = True
    22.         else:
    23.             # print(obj.errors)
    24.             error_str = obj.errors.as_json()
    25.             result['message'] = json.loads(error_str)
    26.         return HttpResponse(json.dumps(result))
    27.     return render(request, 'login.html')
    login.html
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <style>
    7.         .error-msg{
    8.             color:red;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <div>
    14.         <div>
    15.             <input type="text" name="username" />
    16.         </div>
    17.         <div>
    18.             <input type="password" name="password" />
    19.         </div>
    20.         <input type="button" value="提交" onclick="DoSubmit();"/>
    21.     </div>
    22.     <script src="/static/jquery-2.1.4.min.js"></script>
    23.     <script>
    24.         function DoSubmit() {
    25.             var input_dic = {};
    26.             $('input').each(function () {
    27.                 var v = $(this).val();
    28.                 var n = $(this).attr('name');
    29.                 input_dic[n] = v;
    30.             });
    31.             console.log(input_dic);
    32.             $.ajax({
    33.                 url:'/login/',
    34.                 type:'POST',
    35.                 data:input_dic,
    36.                 dataType: 'json',
    37.                 success: function (rdata) {
    38.                     if(rdata.status){
    39.                         location.href = '/index/';
    40.                     }else{
    41.                         $.each(rdata.message, function (k,v) {
    42.                             console.log(k,v[0].message);
    43.                             var tag = document.createElement('span');
    44.                             tag.className = 'error-msg';
    45.                             tag.innerText = v[0].message;
    46.                             $('input[name="' + k + '"]').after(tag);
    47.                         })
    48.                     }
    49.                 },
    50.                 error: function () {
    52.                 }
    53.             })
    54.         }
    55.     </script>
    56. </body>
    57. </html>
    效果图：
     
  • 相关阅读:
    明确目标
    适应环境
    解决问题的方式
    超市收银系统设计
    功能开发流程
    JS代码和OC代码的相互调用
    app上架流程的整理
    手动创建单例
    Python 安装mysqldb
    Python UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-4: ordinal not in range(128)
  • 原文地址：https://www.cnblogs.com/wumingxiaoyao/p/6478280.html
Copyright © 2011-2022 走看看