Django框架学习笔记（16.利用ajax实现简易的验证）

最新推荐文章于 2024-03-18 12:09:54 发布
最新推荐文章于 2024-03-18 12:09:54 发布
阅读量392 收藏
点赞数
分类专栏： Django框架 文章标签： django 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41144008/article/details/78841247
版权

继续上一篇的例子：

host.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .shade {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 100;
        }

        .add-model {
            position: fixed;
            height: 300px;
            width: 400px;
            top: 100px;
            left: 50%;
            z-index: 101;
            border: 1px solid red;
            background-color: white;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<h1>主机列表(对象)</h1>
<div>
    <input id="add_host" type="button" value="添加"/>
</div>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>主机名</th>
        <th>IP</th>
        <th>端口</th>
        <th>业务线名称</th>
    </tr>
    </thead>
    <tbody>
    {% for row in v1 %}
        <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.hostname }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.b.caption }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div class="shade hide"></div>
<div class="add-model hide">
    <form method="POST" action="/host">
        <div class="group">
            <input id="host" type="text" placeholder="主机名" name="hostname"/>
        </div>
        <div class="group">
            <input id="ip" type="text" placeholder="IP" name="ip"/>
        </div>
        <div class="group">
            <input id="port" type="text" placeholder="端口" name="port"/>
        </div>
        <div>
            <select id="sel" name="b_id">
                {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <input type="submit" value="提交"/>
        <a id="ajax_submit"
           style="display: inline-block; padding: 5px; background-color: green; color: white">ajax提交</a>
        <input id="cancel" type="button" value="取消"/>
    </form>
</div>
<script src="/static/jquery1.js"></script>
<script>
    $(function () {
        $('#add_host').click(function () {
            $('.shade,.add-model').removeClass('hide')
        });
        $('#cancel').click(function () {
            $('.shade,.add-model').addClass('hide')
        });
        $('#ajax_submit').click(function () {
            $.ajax({
                url: '/test_ajax',
                type: 'POST',
                data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id':$('#sel').val()},
                success: function (data) {
                    if(data == 'OK'){
                        location.reload();
                    } else{
                        alert(data);
                    }
                }

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

views.py中加入：

def test_ajax(request):
    h = request.POST.get('hostname')
    i = request.POST.get('ip')
    p = request.POST.get('port')
    b = request.POST.get('b_id')
    if h and len(h) > 5:
        models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b)
        return HttpResponse("OK")
    else:
        return HttpResponse("主机名太短")

urls.py中加入：

url(r'test_ajax$', views.test_ajax),


运行：

如果输入的少于5，就会弹出这样的对话框，如果正常，就会刷新页面。并且加入了新添加的数据





这里还有不完善的地方，可以继续修改下：

views.py:

def test_ajax(request):
    import json
    ret = {'status': True, 'error': None, 'data': None}
    try:
        h = request.POST.get('hostname')
        i = request.POST.get('ip')
        p = request.POST.get('port')
        b = request.POST.get('b_id')
        if h and len(h) > 5:
            models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b)
        else:
            ret['status'] = False
            ret['error'] = "太短了"
    except Exception as e:
        ret['status'] = False
        ret['error'] = "请求错误"
    return HttpResponse(json.dumps(ret))


host.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .shade {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 100;
        }

        .add-model {
            position: fixed;
            height: 300px;
            width: 400px;
            top: 100px;
            left: 50%;
            z-index: 101;
            border: 1px solid red;
            background-color: white;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<h1>主机列表</h1>
<div>
    <input id="add_host" type="button" value="添加"/>
</div>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>主机名</th>
        <th>IP</th>
        <th>端口</th>
        <th>业务线名称</th>
    </tr>
    </thead>
    <tbody>
    {% for row in v1 %}
        <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.hostname }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.b.caption }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div class="shade hide"></div>
<div class="add-model hide">
    <form method="POST" action="/host">
        <div class="group">
            <input id="host" type="text" placeholder="主机名" name="hostname"/>
        </div>
        <div class="group">
            <input id="ip" type="text" placeholder="IP" name="ip"/>
        </div>
        <div class="group">
            <input id="port" type="text" placeholder="端口" name="port"/>
        </div>
        <div>
            <select id="sel" name="b_id">
                {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <input type="submit" value="提交"/>
        <a id="ajax_submit"
           style="display: inline-block; padding: 5px; background-color: green; color: white">ajax提交</a>
        <input id="cancel" type="button" value="取消"/>
        <span id="error_msg" style="color: red"></span>
    </form>
</div>
<script src="/static/jquery1.js"></script>
<script>
    $(function () {
        $('#add_host').click(function () {
            $('.shade,.add-model').removeClass('hide')
        });
        $('#cancel').click(function () {
            $('.shade,.add-model').addClass('hide')
        });
        $('#ajax_submit').click(function () {
            $.ajax({
                url: '/test_ajax',
                type: 'POST',
                data: {
                    'hostname': $('#host').val(),
                    'ip': $('#ip').val(),
                    'port': $('#port').val(),
                    'b_id': $('#sel').val()
                },
                success: function (data) {
                    var obj = JSON.parse(data);
                    if (obj.status) {
                        location.reload();
                    }else{
                        $('#error_msg').text(obj.error);
                    }
                }
            })

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



效果就是这样：





还可以设置编辑和取消：

这里简单地写下思路：

host.html:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .shade {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 100;
        }

        .add-model, .edit-model {
            position: fixed;
            height: 300px;
            width: 400px;
            top: 100px;
            left: 50%;
            z-index: 101;
            border: 1px solid red;
            background-color: white;
            margin-left: -200px;
        }
    </style>
</head>
<body>
<h1>主机列表(对象)</h1>
<div>
    <input id="add_host" type="button" value="添加"/>
</div>
<table border="1">
    <thead>
    <tr>
        <th>序号</th>
        <th>主机名</th>
        <th>IP</th>
        <th>端口</th>
        <th>业务线名称</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    {% for row in v1 %}
        <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
            <td>{{ forloop.counter }}</td>
            <td>{{ row.hostname }}</td>
            <td>{{ row.ip }}</td>
            <td>{{ row.port }}</td>
            <td>{{ row.b.caption }}</td>
            <td><a class="edit">编辑</a>|<a class="delete">删除</a></td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div class="shade hide"></div>
<div class="add-model hide">
    <form method="POST" action="/host">
        <div class="group">
            <input id="host" type="text" placeholder="主机名" name="hostname"/>
        </div>
        <div class="group">
            <input id="ip" type="text" placeholder="IP" name="ip"/>
        </div>
        <div class="group">
            <input id="port" type="text" placeholder="端口" name="port"/>
        </div>
        <div>
            <select id="sel" name="b_id">
                {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <input type="submit" value="提交"/>
        <a id="ajax_submit"
           style="display: inline-block; padding: 5px; background-color: green; color: white">ajax提交</a>
        <input id="cancel" type="button" value="取消"/>
        <span id="error_msg" style="color: red"></span>
    </form>
</div>
<div class="edit-model hide">
    <form id="edit_form" method="POST" action="/host">
        <input type="text" name="nid" style="display: none"/>
        <input type="text" placeholder="主机名" name="hostname"/>
        <input type="text" placeholder="IP" name="ip"/>
        <input type="text" placeholder="端口" name="port"/>
        <select name="b_id">
            {% for op in b_list %}
                <option value="{{ op.id }}">{{ op.caption }}</option>
            {% endfor %}
        </select>
        <a id="ajax_submit_edit">确认编辑</a>
    </form>
</div>
<script src="/static/jquery1.js"></script>
<script>
    $(function () {
        $('#add_host').click(function () {
            $('.shade,.add-model').removeClass('hide')
        });
        $('#cancel').click(function () {
            $('.shade,.add-model').addClass('hide')
        });
        $('#ajax_submit').click(function () {
            $.ajax({
                url: '/test_ajax',
                type: 'POST',
                data: {
                    'hostname': $('#host').val(),
                    'ip': $('#ip').val(),
                    'port': $('#port').val(),
                    'b_id': $('#sel').val()
                },
                success: function (data) {
                    var obj = JSON.parse(data);
                    if (obj.status) {
                        location.reload();
                    } else {
                        $('#error_msg').text(obj.error);
                    }
                }
            })

        });
        $('.edit').click(function () {
            $('.shade,.edit-model').removeClass('hide');
            var bid = $(this).parent().parent().attr('bid');
            var nid = $(this).parent().parent().attr('hid');
            $('#edit_form').find('select').val(bid);
            $('#edit_form').find('input[name="nid"]').val(nid);
            $.ajax({
                data: $('#edit_form').serialize()
            });
            //models.Host.objects.filter(nid=nid).update()即可
        })
    })
</script>
</body>
</html>




__XYQ
关注
专栏目录
django框架学习笔记
03-16
【标题】：“django框架学习笔记” 【描述】：“django学习” 在Python的世界里，Django是一个强大且受欢迎的Web框架，它遵循模型-视图-控制器（MVC）设计模式，用于快速开发高效且可维护的网站。Django强调代码...
2019版-千锋Django-源码+笔记.zip
04-09
《深入探索Django框架：2019版千锋Django源码与笔记解析》 Django，作为Python世界中最受欢迎的Web开发框架之一，以其高效、简洁和强大的功能著称。2019版千锋Django的源码与笔记资源，为初学者和进阶者提供了一个...
Ajax
******* ▄︻┻┳═一 *******
09-18 823
Ajax主要作用： 把数据发到后台，但是不刷新页面，然后后台再给前端一个提示一、发送的格式 给对应标签(submit)绑定事件，利用jQery发请求，下面是一个固定格式$.ajax({ url:'', type:'POST/GET', #GET或者POST data:{'k1':123,'k2':'root'} traditional:true, #加入
jquery双击进行编辑
MrWang
03-13 2553
Edit content                 http://code.jquery.com/jquery-1.7.1.min.js">>         $(function() {         $("#btnEdit").click(edit);         $(".editable").dblclick(edit);     });     fu
django_关键点
weixin_30421809的博客
09-12 1015
安装 打开命令提示符，然后输入pip3 install django 创建优先级 配置模板的路径：templates 配置静态目录的路径：static 相关命令 python manage.py runserver 127.0.0.1:8001　　#运行服务器（这个需要命令提示符进入到对应django目录） django-admin startp...
多对多实例
weixin_34415923的博客
06-15 584
程序目录 Models.py from django.db import models# Create your models here.class Business(models.Model):#默认id列caption=models.CharField(max_length=32)code=models.CharField(max_length=30,null=...
DjangoForm 提交验证
weixin_30737363的博客
07-19 97
用户提交数据的验证 1.创建模版 -- class LoginForm(forms.Form):.... 2.将请求交给模版，创建一个对象 -- obj = LoginForm(request.POST) 3.进行验证 -- obj.is_valid() 4.获取正确的信息 ...
Django框架学习笔记（18.一些简易的知识补充）
一清的博客
12-20 294
1.URL对应可以有参数，例如： url(r'^index/', views.index, {'name': 'root'}), 然后在views.py中写的时候记得加上一个名为name的参数： def index(request, name): print(name) return HttpResponse("OK") 这样就会打印出root
Python：Django3.1 框架学习笔记
weixin_45365220的博客
10-28 1905
Django框架符合的是（MVT模型） 创建项目 创建应用 项目与应用之间的联系 Django核心----ORM模型 设计模型类和表 与数据库的交互流程，生成迁移文件，文件迁移 通过模型类操作数据表 外键的使用 Django 管理页面 创建管理员账号 自定义后台模型管理类 将默认数据库sqlite3换成MySQl 视图文件的使用 path()函数传递了四个参数，两个是必需的：路由和视图，两个是可选的：kwargs和name 利用path()和re_path(),在url中取特定的不固定页面 模板文件的使用
Django框架学习收藏
06-23 176
Django 购买视频自学读书笔记https://www.bilibili.com/video/av17879644/?p=1 ---------自我学习总结01 一、django1.MVC设计理念：主要进行前后端进行分离，解耦。M:模型 ：数据，数据库的数据V：视图 ：处理数据的显示，视图依据模型创建。C：控制器器 ：控制器是模型和视图模型交互的中介。 2.djanng框架...
【Django框架学习笔记】超详细的Python后端开发Django框架学习笔记
m0_67844671的博客
03-18 1420
详细介绍了Python后端开发Django框架知识点，包括路由中间件，前后端交互等等
Django框架利用ajax实现批量导入数据功能
01-19
本文实例为大家分享了网页中利用ajax实现批量导入数据功能的实现方法，供大家参考，具体内容如下 url.py代码: 代码如下:url(r’^workimport/$’, ‘keywork.views.import_keywork’, name=’import_keywork’) view....
基于Django框架的AJAX文件上传功能实现及三种方式源码解析
最新发布
10-04
本项目是Django框架下AJAX文件上传功能的学习与测试实例。项目包含29个文件，涵盖11个Python源文件、3个HTML文件、1个JavaScript文件、1个Markdown文件和1个图片文件。源码展示了三种文件上传方法：表单方式、jQuery...
django ajax异步请求Django的Ajax库3813428.zip
01-31
在Django框架中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，用于实现网页的异步更新，提高用户体验。在不刷新整个页面的情况下，Ajax能够向服务器发送请求并接收响应，处理后台数据，使得交互更加...
Django框架学习笔记（2.实现用户登录（上））
一清的博客
12-16 2967
先写简单的： views.py: from django.shortcuts import HttpResponse from django.shortcuts import render def login(request): return render(request, "login.html") def home(request): return HttpResp
Django框架学习笔记（7.基于正则表达式的URL）
一清的博客
12-17 1948
创建Django工程，配置完成，创建APP urls.py from django.conf.urls import url from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.
Django框架学习笔记（5.获取多个数据以及文件上传）
一清的博客
12-17 1731
前篇做到了获取一个输入框的内容，不过，怎么获取多个数据，如checkbox里的， 如何上传一个文件呢？ 这里做个简单的介绍： 1.创建Django工程，配置相关，创建app urls.py修改如下： from django.contrib import admin from django.urls import path from app01 import views url
Django框架学习笔记（13.获取单表单数据的三种方式）
一清的博客
12-18 785
一个小示例： 创建Django工程，创建app，注册app project下的urls.py: from django.contrib import admin from django.urls import path from django.conf.urls import url from app01 import views urlpatterns = [ path('ad
Django框架学习笔记（6.FBV和CBV简单介绍）
一清的博客
12-17 644
前面学习的其实都是FBV：     function base view     ursl.py中对应函数设置     views.py中定义函数 其实还有一种CBV：     class base view     urls.py中可以对应一个类 创建好Django工程 urls.py加入（as_view（）是固定用法）: path('home/', views.H
Django框架AJAX使用及绕过CSRF验证实战解析
"django框架中ajax的使用及避开CSRF 验证的方式详解" 在Django框架中，Ajax（Asynchronous JavaScript And XML）被广泛用于实现网页的无刷新更新，提高用户体验。Ajax允许前端通过JavaScript向后端发送异步请求，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值