一个初学者的辛酸路程-依旧Django

一个初学者的辛酸路程-依旧Django
回顾：

1、Django的请求声明周期？

请求过来，先到URL，URL这里写了一大堆路由关系映射，如果匹配成功，执行对应的函数，或者执行类里面对应的方法，FBV和CBV，本质上返回的内容都是字符串，通过复杂字符串来说比较麻烦，就写到文件里面，通过OPEN函数打开再返回给用户，所以模板可以任何文件名。

后台一定要说，模板里面有特殊的标记，待特殊标记的模板+值进行渲染，得到最终给用户的字符串。

总结为：

路由系统==》视图函数==》获取模板+数据==>渲染==》最终字符串返回给用户。

2、路由系统

有哪几种对应？

1、URL对应函数，可以包含正则

/index/ ==> 函数(参数)或者类 .as_view() (参数)

2、上面是定时的，所以有正则

/detail/(d+) ==> 函数(参数)或类 .as_vies() (参数)

3、基于问号和参数名

/detail/(?P<nid>d+) ==> 函数(参数)或类 .as_vies() (参数)

4、路由的分发，使用include和前缀来区分

/detail/ ==> include("app01.urls")

5、规定路由对应的名字

/detail/ name="a1" ==> include("app01.urls")
- 视图中：使用reverse函数来做
- 模板种： {% url "a1" %}
3、视图函数

FBV 和CBV的定义：

FBV就是函数，CBV就是类

FBV：

def index(request,*args,**kwargs):

pass

CBV: 类

class Home(views.View):
- def get(self,request,*args,**kwargs):
- ..
获取用户请求中的数据：
- request.POST.get
- request.GET.get
- request.FILES.get()
- #checkbox复选框
- ......getlist()
- request.path_info
- 文件对象 = request.FILES.get() 或者input的name
- 文件对象.name
- 文件对象.size
- 文件对象.chunks()
- #<form 特殊的设置></form>
给用户返回数据：
- render（request，HTML模板文件的路径，{‘k1’:[1,2,3,4],'k2':{'name':'da','age':73}}）
- redirect("URL") 就是我们写的URL，也可以是别的网站
- HttpResponse(字符串)
4、模板语言
- render（request，HTML模板文件的路径，{'obj':1234,‘k1’:[1,2,3,4],'k2':{'name':'da','age':73}}）
如何在HTML去取值

<html>

<body>
- <h1> {{ obj }}</h1>
- <h1> {{ k1.3 }}</h1>
- <h1> {{ k2.name}}</h1>
- 循环列表
- {% for i in k1 %}
- <p> {{ i}}</p>
- {% endfor%}
- 循环字典
- {% for row in k2.keys %}
- {{ row }}
- {% endfor %}
- {% for row in k2.values %}
- {{ row }}
- {% endfor %}
- {% for k,v in k2.items %}
- {{ k }}--{{v}}
- {% endfor %}
</body>

</html>

5、数据库取数据 ORM（关系对象映射，写的类自动转为SQL语句取数据，去到以后转换成对象给我）

两个操作：

1、创建类和字段

class User(models.Model):
- age = models.IntergerField() 整数不用加长度，没有一点用
- name = models.CharField(max_length=12) 字符长度，只接受12个字符
- 生成数据库结构：
- python manage.py makemigrations
- python manage.py migrate
- 如果没有生成，那就是settings.py里要注册app，不然会出问题，数据库创建不了。
2、操作

增

models.User.objects.create(name="test",age=18)

传个字典

dic = {'name': 'xx' , 'age': 19}

models.User.objects.create(**dic)

obj = models.User(name="test",age=18)

obj.save()

删

models.User.objects.filter(id=1).delete()

改

models.User.objects.filter(id__gt=1).update(name='test',age=23)

传字典也可以

dic = {'name': 'xx' , 'age': 19}

models.User.objects.filter(id__gt=1).update(**dic)

查

models.User.objects.filter(id=1)

models.User.objects.filter(id__gt=1)

models.User.objects.filter(id__lt=1)

models.User.objects.filter(id__lte=1)

models.User.objects.filter(id__gte=1)

models.User.objects.filter(id=1,name='root')

换成字典也可以传

dic = {'name': 'xx' , 'age': 19}

models.User.objects.filter(**dic)

外键：

正式开干

1、创建1对多表结构

执行创建表命令，出现下面报错

文件在于没有注册app

创建表，表信息如下：
1. from django.db import models
1. # Create your models here.
1. #业务线
1. class Business(models.Model):
1. #默认有个id列
1. caption = models.CharField(max_length=32)
1. class Host(models.Model):
1. nid = models.AutoField(primary_key=True)
1. hostname = models.CharField(max_length=32,db_index=True)
1. ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
1. port = models.IntegerField()
1. b = models.ForeignKey(to="Business",to_field='id')
执行下面命令创建表结构

如果我创建完了以后呢，然后我又加了一条语句，会报错呢？

执行下面命令，会有2种选择，

所以可以修改为这个
1. code = models.CharField(max_length=32,null=True,default="SA")
具体操作：

1、HTML
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. </head>
1. <body>
1. <h1>业务线列表（对象方式）</h1>
1. <ul>
1. {% for row in v1 %}
1. <li>{{ row.id }}-{{ row.caption }}-{{ row.code }}</li>
1. {% endfor %}
1. </ul>
1. <h1>业务线列表（字典）</h1>
1. <ul>
1. {% for row in v2 %}
1. <li>{{ row.id }}-{{ row.caption }}</li>
1. {% endfor %}
1. </ul>
1. <h1>业务线列表（元祖）</h1>
1. <ul>
1. {% for row in v3 %}
1. <li>{{ row.0 }}-{{ row.1 }}</li>
1. {% endfor %}
1. </ul>
1. </body>
1. </html>
2、函数
1. from django.shortcuts import render
1. from app01 import models
1. # Create your views here.
1. def business(request):
1. v1 = models.Business.objects.all()
1. #获取的是querySET,里面放的是对象，1个对象有1行数据，每个对象里有个id caption code
1. #[obj(id,caption,code),obj(id,caption,code)]
1. v2 = models.Business.objects.all().values('id','caption')
1. #querySET ，字典
1. #[{'id':1,'caption':'yunwei'},{}]
1. v3 = models.Business.objects.all().values_list('id','caption')
1. #querySET ,元祖
1. #[(1,运维部),(2,开发)]
1. return render(request,'business.html',{'v1':v1,'v2':v2,'v3':v3})
3、URL
1. from django.conf.urls import url
1. from django.contrib import admin
1. from app01 import views
1. urlpatterns = [
1. url(r'^admin/', admin.site.urls),
1. url(r'^business$', views.business),
1. ]
4、models
1. from django.db import models
1. # Create your models here.
1. #业务线
1. class Business(models.Model):
1. #默认有个id列
1. caption = models.CharField(max_length=32)
1. code = models.CharField(max_length=32,null=True,default="SA")
1. class Host(models.Model):
1. nid = models.AutoField(primary_key=True)
1. hostname = models.CharField(max_length=32,db_index=True)
1. ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
1. port = models.IntegerField()
1. b = models.ForeignKey(to="Business",to_field='id')
实现如下：

1对多跨表操作

上面上数据库取数据，可以拿到3种方式。

元素不一样而已。

对象的话：封装到类，通过点去取值，因为对象字段要用点访问

字典：通过括号去取

元祖：通过索引去取

只要出现values内部元素都是字典，values_list内部都是元祖，其他的都是对象了。

querySET就是一个列表，来放很多对象，如果执行一个点get，ID=1，获取到的不是querySET了，而是一个对象，这个方法有个特殊的，如果ID=1不存在就直接爆出异常了。

怎么解决呢？只要是filter获取的都是querySET，如果没有拿到就是一个空列表。后面加 .first()

如果存在，获取到的就是对象，如果不存在，返归的就是none

现在业务表没有创建关系，下面搞个页面把主机列出来。

b 就是一个对象，封装了约束表的对象，所以通过b可以取出业务的信息，

b相当于另外一张表里面的一行数据
1. print(row.nid,row.hostname,row.ip,row.port,row.b_id,row.b.caption,row.b.code,row.b.id)
如果想要把业务表数据列出来，就可以通过b了

一般情况下，主机ID不需要显示，所以隐藏起来，因为我修改要使用到它，业务线ID也不要

具体操作：

1、HTML
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. </head>
1. <body>
1. <h1>host表</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>IP</th>
1. <th>端口</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v1 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.ip }}</td>
1. <td>{{ row.port }}</td>
1. <td>{{ row.b.caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. </body>
1. </html>
2、函数
1. def host(request):
1. #也有3种方式
1. v1 = models.Host.objects.filter(nid__gt=0)
1. for row in v1:
1. print(row.nid,row.hostname,row.ip,row.port,row.b_id,row.b.caption,row.b.code,row.b.id)
1. # return HttpResponse("Host")
1. return render(request,'host.html',{'v1':v1})
3、URL
1. from django.conf.urls import url
1. from django.contrib import admin
1. from app01 import views
1. urlpatterns = [
1. url(r'^admin/', admin.site.urls),
1. url(r'^business$', views.business),
1. url(r'^host$', views.host),
1. ]
4、models
1. from django.db import models
1. # Create your models here.
1. #业务线
1. class Business(models.Model):
1. #默认有个id列
1. caption = models.CharField(max_length=32)
1. code = models.CharField(max_length=32,null=True,default="SA")
1. class Host(models.Model):
1. nid = models.AutoField(primary_key=True)
1. hostname = models.CharField(max_length=32,db_index=True)
1. ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
1. port = models.IntegerField()
1. b = models.ForeignKey(to="Business",to_field='id')
最后显示效果：

一对多表操作的三种方式

如果有外键，通过点来进行跨表

双下划线可以跨表，Django拿到双下划綫就会进行split，记住一点：

如果想跨表都是用双下划线。取值的时候就不一样了，因为拿到的是实实在在的对象，而下面取得都是字符串

最终实现：

代码如下：

1、URL
1. from django.conf.urls import url
1. from django.contrib import admin
1. from app01 import views
1. urlpatterns = [
1. url(r'^admin/', admin.site.urls),
1. url(r'^business$', views.business),
1. url(r'^host$', views.host),
1. ]
2、函数
1. def host(request):
1. #也有3种方式
1. v1 = models.Host.objects.filter(nid__gt=0)
1. # for row in v1:
1. # print(row.nid,row.hostname,row.ip,row.port,row.b_id,row.b.caption,row.b.code,row.b.id)
1. v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
1. # return HttpResponse("Host")
1. print(v2)
1. v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
1. # return HttpResponse("Host")
1. for row in v2:
1. print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
1. return render(request,'host.html',{'v1':v1,'v2':v2,'v3':v3})
3、models
1. from django.db import models
1. # Create your models here.
1. # class Foo(models.Model):
1. # name = models.CharField(max_length=1)
1. #业务线
1. class Business(models.Model):
1. #默认有个id列
1. caption = models.CharField(max_length=32)
1. code = models.CharField(max_length=32,null=True,default="SA")
1. # fk = models.ForeignKey('Foo')
1. class Host(models.Model):
1. nid = models.AutoField(primary_key=True)
1. hostname = models.CharField(max_length=32,db_index=True)
1. ip = models.GenericIPAddressField(protocol="ipv4",db_index=True)
1. port = models.IntegerField()
1. b = models.ForeignKey(to="Business",to_field='id')
4、host.html
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. </head>
1. <body>
1. <h1>host表(对象)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>IP</th>
1. <th>端口</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v1 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.ip }}</td>
1. <td>{{ row.port }}</td>
1. <td>{{ row.b.caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(字典)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v2 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.b__caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(元祖)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v3 %}
1. <tr h-id="{{ row.0 }}" bid="{{ row.2 }}">
1. <td>{{ row.1 }}</td>
1. <td>{{ row.3 }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. </body>
1. </html>
增加1对多数据示例

position: fixed absolute relative

实现：

代码如下：

1、HTML，需要引入jQuery
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. <style>
1. .hide{
1. display: none;
1. }
1. .shade{
1. position: fixed;
1. top:0;
1. right:0;
1. left:0;
1. bottom:0;
1. background: black;
1. opacity:0.6;
1. z-index: 100;
1. }
1. .add-modal{
1. position: fixed;
1. height:300px;
1. 400px;
1. top: 100px;
1. left:50%;
1. z-index: 101;
1. border:1px solid red;
1. background: white;
1. margin-left: -200px;
1. }
1. </style>
1. </head>
1. <body>
1. <h1>host表(对象)</h1>
1. <div>
1. <input id="add_host" type="button" value="添加" />
1. </div>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>序号</th>
1. <th>主机名</th>
1. <th>IP</th>
1. <th>端口</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v1 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ forloop.counter }}</td>
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.ip }}</td>
1. <td>{{ row.port }}</td>
1. <td>{{ row.b.caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(字典)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v2 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.b__caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(元祖)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v3 %}
1. <tr h-id="{{ row.0 }}" bid="{{ row.2 }}">
1. <td>{{ row.1 }}</td>
1. <td>{{ row.3 }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. #遮罩层
1. <div class="shade hide"></div>
1. #添加层
1. <div class="add-modal hide">
1. <form method="POST" action="/host">
1. <div class="group">
1. <input type="text" placeholder="主机名" name="hostname" />
1. </div>
1. <div class="group">
1. <input type="text" placeholder="IP" name="ip" />
1. </div>
1. <div class="group">
1. <input type="text" placeholder="端口 " name="port" />
1. </div>
1. <div class="group">
1. <select name="b_id">
1. {% for op in b_list %}
1. <option value="{{ op.id }}">{{ op.caption }}</option>
1. {% endfor %}
1. </select>
1. </div>
1. <input type="submit" value="提交">
1. <input id="cancel" type="button" value="取消">
1. </form>
1. </div>
1. <script src="/static/jquery-1.12.4.js"></script>
1. <script>
1. $(function(){
1. $('#add_host').click(function(){
1. $('.shade,.add-modal').removeClass('hide');
1. })
1. $('#cancel').click(function(){
1. $('.shade,.add-modal').addClass('hide');
1. })
1. })
1. </script>
1. </body>
1. </html>
2、函数
1. def host(request):
1. if request.method == 'GET':
1. v1 = models.Host.objects.filter(nid__gt=0)
1. v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
1. v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
1. b_list = models.Business.objects.all()
1. return render(request,'host.html',{'v1':v1,'v2':v2,'v3':v3,'b_list':b_list})
1. elif request.method == "POST":
1. h = request.POST.get("hostname")
1. i = request.POST.get("ip")
1. p = request.POST.get("port")
1. b = request.POST.get("b_id")
1. # models.Host.objects.create(hostname=h,
1. # ip=i,
1. # port=p,
1. # b=models.Business.objects.get(id=b)
1. # )
1. models.Host.objects.create(hostname=h,
1. ip=i,
1. port=p,
1. b_id=b
1. )
1. return redirect('/host')
3、URL
1. from django.conf.urls import url
1. from django.contrib import admin
1. from app01 import views
1. urlpatterns = [
1. url(r'^admin/', admin.site.urls),
1. url(r'^business$', views.business),
1. url(r'^host$', views.host),
1. ]
4、models

同上

初识ajax ，加入提示

上面的会出现，提交的时候出现空值，这个是不允许的，如何解决呢？

通过新URL的方式可以解决，但是如果有弹框呢？我点击提交对话框都不在了额，那我错误提示放哪呢？

SO，搞一个按钮，让他悄悄提交,提交数据到后台，但是页面不刷新，后台拿到在给他一个回复

这里就用Ajax来提交。

好多地方都在使用，比如说下面的

就是用jQuery来发一个Ajax请求，

$.ajax({

url: '/host',
- type: "POST",
- data: {'k1':"123",'k2':"root"},
- success: function(data){
- }
- })
实现如下：

具体实现：

1、HTML
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. <style>
1. .hide{
1. display: none;
1. }
1. .shade{
1. position: fixed;
1. top:0;
1. right:0;
1. left:0;
1. bottom:0;
1. background: black;
1. opacity:0.6;
1. z-index: 100;
1. }
1. .add-modal{
1. position: fixed;
1. height:300px;
1. 400px;
1. top: 100px;
1. left:50%;
1. z-index: 101;
1. border:1px solid red;
1. background: white;
1. margin-left: -200px;
1. }
1. </style>
1. </head>
1. <body>
1. <h1>host表(对象)</h1>
1. <div>
1. <input id="add_host" type="button" value="添加" />
1. </div>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>序号</th>
1. <th>主机名</th>
1. <th>IP</th>
1. <th>端口</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v1 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ forloop.counter }}</td>
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.ip }}</td>
1. <td>{{ row.port }}</td>
1. <td>{{ row.b.caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(字典)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v2 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.b__caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(元祖)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v3 %}
1. <tr h-id="{{ row.0 }}" bid="{{ row.2 }}">
1. <td>{{ row.1 }}</td>
1. <td>{{ row.3 }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. #遮罩层
1. <div class="shade hide"></div>
1. #添加层
1. <div class="add-modal hide">
1. <form method="POST" action="/host">
1. <div class="group">
1. <input id="host" type="text" placeholder="主机名" name="hostname" />
1. </div>
1. <div class="group">
1. <input id="ip" type="text" placeholder="IP" name="ip" />
1. </div>
1. <div class="group">
1. <input id="port" type="text" placeholder="端口 " name="port" />
1. </div>
1. <div class="group">
1. <select id="sel" name="b_id">
1. {% for op in b_list %}
1. <option value="{{ op.id }}">{{ op.caption }}</option>
1. {% endfor %}
1. </select>
1. </div>
1. <input type="submit" value="提交">
1. <a id="ajax_submit" style="display: inline-block;padding: 5px;color: white">提交Ajax</a>
1. <input id="cancel" type="button" value="取消">
1. </form>
1. </div>
1. <script src="/static/jquery-1.12.4.js"></script>
1. <script>
1. $(function(){
1. $('#add_host').click(function(){
1. $('.shade,.add-modal').removeClass('hide');
1. });
1. $('#cancel').click(function(){
1. $('.shade,.add-modal').addClass('hide');
1. });
1. $('#ajax_submit').click(function(){
1. $.ajax({
1. url: "/test_ajax",
1. type: 'POST',
1. data: {'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},
1. success: function(data){
1. if(data == "OK"){
1. location.reload()
1. }else{
1. alert(data);
1. }
1. }
1. })
1. })
1. })
1. </script>
1. </body>
1. </html>
2、函数
1. def test_ajax(request):
1. # print(request.method,request.POST,sep=' ')
1. # import time
1. # time.sleep(5)
1. h = request.POST.get("hostname")
1. i = request.POST.get("ip")
1. p = request.POST.get("port")
1. b = request.POST.get("b_id")
1. if h and len(h) >5:
1. models.Host.objects.create(hostname=h,
1. ip=i,
1. port=p,
1. b_id=b
1. )
1. return HttpResponse('OK')
1. else:
1. return HttpResponse('太短了')
3、URL
1. from app01 import views
1. urlpatterns = [
1. url(r'^admin/', admin.site.urls),
1. url(r'^business$', views.business),
1. url(r'^host$', views.host),
1. url(r'^test_ajax$', views.test_ajax),
1. ]
4、models

同上

Ajax的整理：

继续更改

会用到下面内容

修改HTML
1. <input type="submit" value="提交">
1. <a id="ajax_submit" style="display: inline-block;padding: 5px;background-color: red;color: white">提交Ajax</a>
1. <input id="cancel" type="button" value="取消">
1. <span id="erro_msg" style="color: red;"></span>
1. </form>
1. </div>
1. <script src="/static/jquery-1.12.4.js"></script>
1. <script>
1. $(function(){
1. $('#add_host').click(function(){
1. $('.shade,.add-modal').removeClass('hide');
1. });
1. $('#cancel').click(function(){
1. $('.shade,.add-modal').addClass('hide');
1. });
1. $('#ajax_submit').click(function(){
1. $.ajax({
1. url: "/test_ajax",
1. type: 'POST',
1. data: {'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},
1. success: function(data){
1. var obj = JSON.parse(data);
1. if(obj.status){
1. location.reload();
1. }else{
1. $('#erro_msg').text(obj.error);
1. }
1. }
1. })
1. })
1. })
1. </script>
修改函数
1. def test_ajax(request):
1. # print(request.method,request.POST,sep=' ')
1. # import time
1. # time.sleep(5)
1. import json
1. ret = {'status': True,'error':None,'data':None}
1. try:
1. h = request.POST.get("hostname")
1. i = request.POST.get("ip")
1. p = request.POST.get("port")
1. b = request.POST.get("b_id")
1. if h and len(h) >5:
1. models.Host.objects.create(hostname=h,
1. ip=i,
1. port=p,
1. b_id=b)
1. # return HttpResponse('OK')
1. else:
1. ret['status'] = False
1. ret['error'] = "太短了"
1. # return HttpResponse('太短了')
1. except Exception as e:
1. ret['status'] = False
1. ret['error'] = "请求错误"
1. return HttpResponse(json.dumps(ret))
建议：

永远让服务端返回一个字典。

return HttpResponse(json.dumps(字典))

删除类似：

出来一个弹框，把ID=某行删除掉。form表单可以，ajax也可以，或者找到当前标签，remove掉就不需要刷新了。

编辑类似：

通过ID去取值。

如果发送ajax请求
1. data: $('#edit_form').serialize()
这个会把form表单值打包发送到后台

效果取值：

HTML代码
1. <!DOCTYPE html>
1. <html lang="en">
1. <head>
1. <meta charset="UTF-8">
1. <title>Title</title>
1. <style>
1. .hide{
1. display: none;
1. }
1. .shade{
1. position: fixed;
1. top:0;
1. right:0;
1. left:0;
1. bottom:0;
1. background: black;
1. opacity:0.6;
1. z-index: 100;
1. }
1. .add-modal,.edit-modal{
1. position: fixed;
1. height:300px;
1. 400px;
1. top: 100px;
1. left:50%;
1. z-index: 101;
1. border:1px solid red;
1. background: white;
1. margin-left: -200px;
1. }
1. </style>
1. </head>
1. <body>
1. <h1>host表(对象)</h1>
1. <div>
1. <input id="add_host" type="button" value="添加" />
1. </div>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>序号</th>
1. <th>主机名</th>
1. <th>IP</th>
1. <th>端口</th>
1. <th>业务线名称</th>
1. <th>操作</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v1 %}
1. <tr hid="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ forloop.counter }}</td>
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.ip }}</td>
1. <td>{{ row.port }}</td>
1. <td>{{ row.b.caption }}</td>
1. <td>
1. <a class="edit">编辑</a>|<a class="delete">删除</a>
1. </td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(字典)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v2 %}
1. <tr h-id="{{ row.nid }}" bid="{{ row.b_id }}">
1. <td>{{ row.hostname }}</td>
1. <td>{{ row.b__caption }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. <h1>host表(元祖)</h1>
1. <table border="1">
1. <thead>
1. <tr>
1. <th>主机名</th>
1. <th>业务线名称</th>
1. </tr>
1. </thead>
1. <tbody>
1. {% for row in v3 %}
1. <tr h-id="{{ row.0 }}" bid="{{ row.2 }}">
1. <td>{{ row.1 }}</td>
1. <td>{{ row.3 }}</td>
1. </tr>
1. {% endfor %}
1. </tbody>
1. </table>
1. #遮罩层
1. <div class="shade hide"></div>
1. #添加层
1. <div class="add-modal hide">
1. <form id="add_form" method="POST" action="/host">
1. <div class="group">
1. <input id="host" type="text" placeholder="主机名" name="hostname" />
1. </div>
1. <div class="group">
1. <input id="ip" type="text" placeholder="IP" name="ip" />
1. </div>
1. <div class="group">
1. <input id="port" type="text" placeholder="端口 " name="port" />
1. </div>
1. <div class="group">
1. <select id="sel" name="b_id">
1. {% for op in b_list %}
1. <option value="{{ op.id }}">{{ op.caption }}</option>
1. {% endfor %}
1. </select>
1. </div>
1. <input type="submit" value="提交">
1. <a id="ajax_submit" style="display: inline-block;padding: 5px;color: white">提交Ajax</a>
1. <input id="cancel" type="button" value="取消">
1. <span id="erro_msg" style="color: red;"></span>
1. </form>
1. </div>
1. <div class="edit-modal hide">
1. <form id="edit_form" method="POST" action="/host">
1. <input type="text" name="nid" style="display: none;">
1. <input type="text" placeholder="主机名" name="hostname" />
1. <input type="text" placeholder="IP" name="ip" />
1. <input type="text" placeholder="端口 " name="port" />
1. <select name="b_id">
1. {% for op in b_list %}
1. <option value="{{ op.id }}">{{ op.caption }}</option>
1. {% endfor %}
1. </select>
1. <a id="ajax_submit_edit">确定编辑</a>
1. </form>
1. </div>
1. <script src="/static/jquery-1.12.4.js"></script>
1. <script>
1. $(function(){
1. $('#add_host').click(function(){
1. $('.shade,.add-modal').removeClass('hide');
1. });
1. $('#cancel').click(function(){
1. $('.shade,.add-modal').addClass('hide');
1. });
1. $('#ajax_submit').click(function(){
1. $.ajax({
1. url: "/test_ajax",
1. type: 'POST',
1. {# data: {'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},#}
1. data: $('#add_form').serialize(),
1. success: function(data){
1. var obj = JSON.parse(data);
1. if(obj.status){
1. location.reload();
1. }else{
1. $('#erro_msg').text(obj.error);
1. }
1. }
1. })
1. })
1. $('.edit').click(function(){
1. $('.shade,.edit-modal').removeClass('hide');
1. var bid = $(this).parent().parent().attr('bid');
1. var nid = $(this).parent().parent().attr('hid');
1. $('#edit_form').find('select').val(bid);
1. $('#edit_form').find('input[name="nid"]').val(nid);
1. //修改操作了
1. $.ajax({
1. data: $('#edit_form').serialize()
1. });
1. //获取到models.Host.objects.filter(nid=nid).update()
1. })
1. })
1. </script>
1. </body>
1. </html>
里面涉及的知识点：

1、拿到NID并隐藏，用于提交数据

2、使用ajax来提交数据
相关阅读:
MobaXtern显示中文
 SD卡识别——记一次stm32识别BanqSD卡 V2.0识别失败的经历。
《Java 底层原理》Jvm GC算法
 《Java 并发编程》ThreadLock详解
 《Java 底层原理》Jvm对象结构和指针压缩
 《Java 底层原理》Java内存模型
 《Java 底层原理》Java 字节码详解
 jinjia2中的变量使用
 jsonify和json的区别
 虚拟环境是什么？有什么用？怎么用？
原文地址：https://www.cnblogs.com/jixuege-1/p/6600464.html

一个初学者的辛酸路程-依旧Django

回顾：