django ajax提交form表单数据

最新推荐文章于 2022-01-01 08:34:19 发布

weixin_30702887

最新推荐文章于 2022-01-01 08:34:19 发布

阅读量808

点赞数

文章标签： python 数据库

原文链接：http://www.cnblogs.com/jiefangzhe/p/10791151.html

版权

后台:　　

from django.shortcuts import render
from django.shortcuts import redirect
from django.shortcuts import HttpResponse

from django import forms
# 模版
class LoginForm(forms.Form):
    # 模版中的元素
    user = forms.CharField(min_length=6,error_messages={"required": '用户名不能为空','min_length': '用户名长度不能小6'})
    email = forms.EmailField(error_messages={"required": '邮箱不能为空','invalid': '邮箱格式错误'})

class IndexForm(forms.Form):
    # 模版中的元素
    user = forms.CharField(min_length=6,error_messages={"required": '用户名不能为空','min_length': '用户名长度不能小6'})
    email = forms.EmailField(error_messages={"required": '邮箱不能为空','invalid': '邮箱格式错误'})
    favor = forms.MultipleChoiceField(
        choices=[(1,'小虎'),(2,'小小虎'),(3,'小B虎')]
    )

import json
from datetime import date
from datetime import datetime

def index(request):
    obj = IndexForm()
    return render(request,'index.html',{'obj': obj})

def edit_index(request):
    obj = IndexForm({'user': 'root','email': 'root@live.com','favor': [2,3]})
    return render(request,'index.html',{'obj': obj})


def login(request):
    if request.method == "GET":
        # 数据库中获取
        obj = LoginForm()
        return render(request,'login.html',{'oo': obj})
    elif request.method == "POST":
        """
        obj = LoginForm(request.POST)
        # 验证
        status = obj.is_valid()
        print(status)

        value_dict = obj.clean()
        print(value_dict)

        error_obj = obj.errors.as_json()
        print(error_obj)
        """
        obj = LoginForm(request.POST)
        if obj.is_valid():
            value_dict = obj.clean()
            print(value_dict)
            # create(**value_dict)
        else:
            # 封装了所有的错误信息
            # print(obj.errors['email'][0])
            # print(obj.errors["user"][0])
            # print(type(error_obj))
            from django.forms.utils import ErrorDict
            pass

        return render(request, 'login.html',{'oo': obj})


def login_ajax(request):
    if request.method == "GET":
        return render(request, 'login_ajax.html')
    elif request.method == "POST":
        ret = {'status': True, 'error':None, 'data': None}
        obj = LoginForm(request.POST)
        if obj.is_valid():
            print(obj.clean())
        else:
            # 方式一
            # res_str = obj.errors.as_json() # res_str是一个字符串
            # ret['status'] = False
            # ret['error'] = res_str
            # 两次反序列化
            # 方式二：
            ret['status'] = False
            ret['error'] = obj.errors.as_data() # # {'user': [ValidationError(['用户名长度不能小6'])], 'email': [ValidationError(['邮箱格式错误'])]}
            # # 一次反序列化
        return HttpResponse(json.dumps(ret,cls=JsonCustomEncoder))

from django.core.validators import ValidationError
class JsonCustomEncoder(json.JSONEncoder):
    def default(self, field):
        if isinstance(field, ValidationError):
            return {'code': field.code, 'message': field.message}
        else:
            return json.JSONEncoder.default(self, field)
"""
def login(request):
    if request.method == "GET":
        return render(request,'login.html')
    elif request.method == "POST":
        # 不爽
        u = request.POST.get('user')
        e = request.POST.get('email')
        p = request.POST.get('pwd')
        # 判断用户输入是否为空，提示用户那个错误
        # ...
        # 判断某种格式是否正确,提示用户那个错误
        # ..
        # 数据库校验：
        # filter(user=u,email=e,pwd=p) # filter(**{})
        # create(user=u,email=e,pwd=p) # create(**{})
        # 只要上述条件有一个不满足，

        # 页面上一次提交的数据，无法保留（Form提交）
        return render(request,'login.html', {})
        # return redirect('/login.html')
"""

View Code

前端:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Form提交数据</h1>
    <form method="POST" action="/login.html">
        <p>
            {{ oo.user }}
            <span>{{ oo.errors.user.0 }}</span>

        </p>
        <p>
            {{ oo.email }}
            <span>{{ oo.errors.email.0 }}</span>
        </p>
        <p>
            <input type="text" name="pwd" placeholder="密码" />
        </p>
        <input type="submit" value="提交"  /> {{ msg }}
        <input id="ajax_submit" type="button" value="Ajax提交"  />
    </form>
    <script src="/static/jquery-2.1.4.min.js"></script>
    <script>
        $(function () {
            
            $('#ajax_submit').click(function () {
                $.ajax({
                    url:"/login.html",
                    data: {user:'root', email: 'root@live.com', pwd: '123123'},
                    type: 'POST',
                    success:function (arg) {
                        console.log(arg)
                    }
                })

            })
            
        })
    </script>
</body>
</html>

View Code

　　index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>{{ obj.user }}</p>
    <p>{{ obj.email }}</p>
    <p>{{ obj.favor }}</p>
</body>
</html>

View Code

　　login_ajax:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error-msg{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>Form提交数据</h1>
    <form id="f1">
    <p>
        <input id="u" type="text" name="user" placeholder="用户名" />

    </p>
    <p>
        <input id="e" type="text" name="email" placeholder="邮箱" />
    </p>
    <p>
        <input id="p" type="text" name="pwd" placeholder="密码" />
    </p>
    <input id="ajax_submit" type="button" value="Ajax提交"  />
        </form>
    <script src="/static/jquery-2.1.4.min.js"></script>
    <script>
        $(function () {
            $('#ajax_submit').click(function () {
                $.ajax({
                    url:"/login_ajax.html",
                    //data: {user: $('#u').val(), email: $('#e').val(), pwd: $('#p').val()},
                    data: $('#f1').serialize(),
                    type: 'POST',
                    success:function (arg) {

                        $('.error-msg').remove();
                        var v1 = JSON.parse(arg);
                        console.log(v1);
                        if(!v1.status){
                            // var error_obj = JSON.parse(v1.error);
                            var error_obj = v1.error;
                            $.each(error_obj,function (k,v) {
                                // k: user 或 email
                                // v: [{}{}{},]
                                var tag = document.createElement('span');
                                tag.className = 'error-msg';
                                tag.innerHTML = v[0].message;
                                $("input[name='" + k +"']").after(tag);
                            })
                        }else{
                            location.href = "/index.html"
                        }
                        // { 'stauts': true, 'error':xx, 'data'：’‘}
                    }
                })
            })
        })
    </script>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/jiefangzhe/p/10791151.html

weixin_30702887

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
django ajax提交form表单数据

后台:　　from django.shortcuts import renderfrom django.shortcuts import redirectfrom django.shortcuts import HttpResponsefrom django import forms# 模版class LoginForm(forms.Form):...
复制链接

扫一扫