django ajax提交form表单数据

后台:　　

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')

"""

前端:

<!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>

　　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>

　　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>

django ajax提交form表单数据的更多相关文章

ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
Ajax提交Form表单的一种方法
待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...
ajax提交form表单问题
form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...
Ajax提交form表单内容和文件（jQuery.form.js）
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
使用ajax提交form表单，包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助方法一: function AddHandlingFeeToRefund( ...
jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

随机推荐

redis(1)--redis3.2.8安装
一.下载安装包 http://download.redis.io/releases/ 选择对应的版本二.copy到对应的虚拟机上运行 tar -zxvf redis-3.2.8 进行解压更改 ...
500G ！！史上最全的JAVA全套教学视频网盘分享 (JEECG开源社区)
500 G JAVA视频网盘分享(JEECG开源社区) [涵盖从java入门到深入架构,Linux.云计算.分布式.大数据Hadoop.ios.Android.互联网技术应有尽有] JEECG开源社区 ...
Django07-cookie和session
一.Cookie 1.Cookie的由来大家都知道HTTP协议是无状态的.无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响 ...
每日算法之递推排序(P1866 编号)
兔子也是数字控:每个兔子都有自己喜欢的数字区间,找出能让所有兔子都满意的组合. 将所有兔子喜欢的序号按从小到大排序,此时如果小序号的兔子选择了一个数字,则之后的兔子只要排除排在它之前的兔子数(由于已经 ...
用phpstudy配置网站遇到的一些问题
第一次是配置在我本机,总是连不上数据库,后来查看到mysql.ini配置文件里面端口号有一个不是3306,更改之后就好了. 第二次是配置在笔记本电脑上,安装的时候比较顺利,也就遇到80端口被占用还有缺 ...
information_schema.COLUMNS
MySQL的information_schema库中有个COLUMNS表,里面记录了mysql所有库中所有表的字段信息,该表信息如下: COLUMNS表的每一条记录都对应了数据库中某个表的某个字段,该 ...
qsub
1.qsub.sh for i in `ls`;do if [ -d $i ];then cd $i if [ -f *.sh ];then qsub -cwd -pe smp -q asm.q,al ...
findbugs插件使用
本文以idea的插件举例子介绍 Findbugs是一个静态分析工具,它检查类或者JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题. idea安装自此,插件安装完毕,需要重启idea才生 ...
del_cursor 批量删除游标
declare cursor [del_cursor] is select a.*, a.rowid row_id from [table_name] a order by a.rowid; ...
前端生成pdf
https://stackoverflow.com/questions/31610129/pdfmake-html-table-to-pdfmake-table https://www.jianshu ...

django ajax提交form表单数据

django ajax提交form表单数据的更多相关文章

随机推荐

热门专题