Day20-初识Ajax
想要实现的功能：点击提交以后，让数据发到后台进行验证，但是页面不刷新。悄悄提交用Ajax.
那么返回的字符串怎么样展示到前端HTML页面呢？可以在HTML中写个标签，定义一个选择器。
利用$('#id').text=(JSON.parse(data).error) 来赋值进而展示到页面上。
AJAX 教程
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
Ajax $--就是jquery
$.ajax({
url:'/host', #提交到哪里
type:"post", #以什么方式提交
data:{'k1':123,'k2':'root'}, #提交的内容
success:function(data){ #匿名函数,回调函数，收到客户端的回应后才会执行。
//data是服务器端返回的字符串
var obj=JSON.parse(data);
}
})
1.在host.html中先写1个标签，id="ajax_submit"，增加“悄悄提交”的功能
display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性
2.给这个标签绑定事件
里面写明了：要提交到哪里，以什么方式提交，以及提交的内容。还有回调函数（后台返回的数据，放在data中），即：收到test_ajax客户端的回应后才会执行。如果验证成功，则刷新页面；否则，弹出1条告警信息。$--就是jquery
3.后台在views.py中写一个函数
4.增加路由条目
效果：做了验证
粘贴部分程序：
urls.py-------增加了test_ajax的路由条目
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^business/', views.business),
url(r'^host/', views.host),
url(r'^test_ajax/',views.test_ajax),
]
views.py
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
# Create your views here. def business(request):
v1 = models.Business.objects.all()
#QuerySet类型，里面存放的是对象。[obj(id,caption,code),obj,obj] v2 = models.Business.objects.all().values('id','caption')
# QuerySet类型，里面存放的是字典[{'id':1,'caption':'运维部'},{'id':1,'caption':'开发部'}..] v3 = models.Business.objects.all().values_list('id', 'caption')
# QuerySet类型，里面存放的是元组[(1,'运维部'),(2,'开发部').....] return render(request,'business.html',{'v1':v1,'v2':v2,'v3':v3}) # def host(request):
# v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
# # for row in v1:
# # print(row.b)
# # print(row.b.caption,row.b.code,sep='\t')
# # return HttpResponse("Host")
# v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
# #QuerySet:[{}]
# for row in v2:
# print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
#
# v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
#
# return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3}) def host(request):
if request.method=='GET':
v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
b_list=models.Business.objects.all()
return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3,'b_list':b_list})
elif request.method=='POST':
h=request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
return redirect('/host/') 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('主机名太短了')
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=32) class Host(models.Model):
nid=models.AutoField(primary_key=True)
hostname=models.CharField(max_length=32,db_index=True) #加上索引，可以提高查询速度
ip=models.GenericIPAddressField(protocol="ipv4",db_index=True)
port=models.IntegerField()
b=models.ForeignKey("Business",to_field='id')
host.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shade{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
background:black;
opacity:0.6;
z-index:100;
}
.add-modal{
position:fixed;
height:300px;
width:400px;
top:100px;
left:50%;
z-index:101;
border:1px solid red;
background:white;
margin-left:-200px;
}
</style>
</head>
<body>
<h1>主机列表(对象)-business</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> <h1>主机列表(字典)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v2%}
<tr hid="{{row.nid}}" bid="{{row.b_id}}">
<td>{{row.hostname}}</td>
<td>{{row.b__caption}}</td>
</tr>
{% endfor %} </tbody>
</table> <h1>主机列表(元组)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v3%}
<tr hid="{{row.0}}" bid="{{row.2}}">
<td>{{row.1}}</td>
<td>{{row.3}}</td>
</tr>
{% endfor %}
</tbody>
</table> <div class="shade hide"></div>
<div class="add-modal 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 class="group">
<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:blue;color:white">悄悄提交</a>
<input id="cancel" type="button" value="取消"/>
</form>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').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>
business.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>业务线列表(对象)-business</h1>
{% for row in v1 %}
<li>{{row.id}} - {{row.caption}} - {{row.code}}</li>
{% endfor %} <h1>业务线列表(字典)-business</h1>
{% for row in v2 %}
<li>{{row.id}} - {{row.caption}}</li>
{% endfor %} <h1>业务线列表(元组)-business</h1>
{% for row in v3 %}
<li>{{row.0}} - {{row.1}}</li>
{% endfor %}
</body>
</html>
本节笔记
Ajax $--就是jquery
$.ajax({
url:'/host', #提交到哪里
type:"post", #以什么方式提交
data:{'k1':123,'k2':'root'}, #提交的内容
success:function(data){ #匿名函数
//data是服务器端返回的字符串
var obj=JSON.parse(data);
}
}) 建议：永远让服务器端返回一个字典
return HttpResponse(json.dumps(字典))
修改程序，实现后台的悄悄验证
程序粘贴
views.py
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
# Create your views here. def business(request):
v1 = models.Business.objects.all()
#QuerySet类型，里面存放的是对象。[obj(id,caption,code),obj,obj] v2 = models.Business.objects.all().values('id','caption')
# QuerySet类型，里面存放的是字典[{'id':1,'caption':'运维部'},{'id':1,'caption':'开发部'}..] v3 = models.Business.objects.all().values_list('id', 'caption')
# QuerySet类型，里面存放的是元组[(1,'运维部'),(2,'开发部').....] return render(request,'business.html',{'v1':v1,'v2':v2,'v3':v3}) # def host(request):
# v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
# # for row in v1:
# # print(row.b)
# # print(row.b.caption,row.b.code,sep='\t')
# # return HttpResponse("Host")
# v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
# #QuerySet:[{}]
# for row in v2:
# print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
#
# v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
#
# return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3}) def host(request):
if request.method=='GET':
v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
b_list=models.Business.objects.all()
return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3,'b_list':b_list})
elif request.method=='POST':
h=request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
return redirect('/host/') 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">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shade{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
background:black;
opacity:0.6;
z-index:100;
}
.add-modal{
position:fixed;
height:300px;
width:400px;
top:100px;
left:50%;
z-index:101;
border:1px solid red;
background:white;
margin-left:-200px;
}
</style>
</head>
<body>
<h1>主机列表(对象)-business</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> <h1>主机列表(字典)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v2%}
<tr hid="{{row.nid}}" bid="{{row.b_id}}">
<td>{{row.hostname}}</td>
<td>{{row.b__caption}}</td>
</tr>
{% endfor %} </tbody>
</table> <h1>主机列表(元组)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v3%}
<tr hid="{{row.0}}" bid="{{row.2}}">
<td>{{row.1}}</td>
<td>{{row.3}}</td>
</tr>
{% endfor %}
</tbody>
</table> <div class="shade hide"></div>
<div class="add-modal 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 class="group">
<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:blue;color:white">悄悄提交</a>
<input id="cancel" type="button" value="取消"/>
<span id="error_msg" style="color:red"></span>
</form>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').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>
总结：用ajax进行验证的过程：
Ajax提交的过程：
1. Ajax是写在了host.html页面中。Ajax要提交的数据（想要验证的数据）也是来自于host.html中（当然了host.html中的数据是host函数从用户端获取到的，通过render传过来的）；
2. urls.py中写上对应关系。url(r'^test_ajax/',views.test_ajax),
3. views.py下的ajax(request):函数会拿到这个数据，然后对这个数据进行check； views.py下的ajax(request):也可以直接从views.py中拿数据进行check
4. check完了以后，会通过return HttpResponse 返回一个结果（必须是字符串格式）到host 下的Ajax中，触发Ajax中的success函数的执行。比如可以打印一句“检测通过”
1. return redirect对Ajax没有毛线用，Ajax只是发请求，整个页面是静态不会动的，哥就是不跳;所以用redirect没有用，前端也拿不到任何数据。
2. return render则是想渲染一点东西以后再返回给用户，假设返回一个HTML（其实是字符串）给用户了，那么我们的前端拿到以后，无法对它进行json.parse.要想执行json.parse，必须是形似列表或者字典的数据结构才可以。能不能用render，可以用，但是拿到它以后，用户无法对它进行进一步的操作，只能把它里面的字符串添加到host页面的某个标签下，因为无法对它进行json.parse的操作。
3. 可定制性更高的是用HttpResponse，我们可以让它返回任何数据，前端也好取。返回一个字典，然后前端想做什么就可以做什么了。可以写函数让它发生跳转。
1.在urls.py中写路由关系
url(r'^test_ajax/',views.test_ajax),
2.在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('主机名太短了')
3.在host.html中写关联
<a id="ajax_submit" style="display:inline-block;padding:5px;background:blue;color:white">悄悄提交</a>
$('#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){
//data是服务器端返回的字符串
if(data=="OK"){location.reload()}
else{alert(data);}
本节笔记：
Ajax $--就是jquery
推荐使用下面这种方法
$.ajax({
url:'/host', #提交到哪里
type:"post", #以什么方式提交
data:{'k1':123,'k2':'root'}, #提交的内容
success:function(data){ #匿名函数,回调函数，收到客户端的回应后才会执行。
//data是服务器端返回的字符串
var obj=JSON.parse(data); 转换成json对象
}
}) 建议：永远让服务器端返回一个字典
return HttpResponse(json.dumps(字典)) 另外的这3种在内部调用的都是$.ajax方法。传的时候就不需要字典格式了。
$.get(url="xx",data={},success=) 指明了以type=get的方法提交
$.getJson
$.post(url="xx",data={},success=) 指明了以type=post的方法提交
编辑一对多示例：增加编辑的功能
<input type="text" name="nid" style="display:none"/> 获取到编辑的是哪一行的数据，把行号获取到，不需要让用户看到。但是后台可以得到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.shade{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
background:black;
opacity:0.6;
z-index:100;
}
.add-modal,.edit-modal{
position:fixed;
height:300px;
width:400px;
top:100px;
left:50%;
z-index:101;
border:1px solid red;
background:white;
margin-left:-200px;
}
</style>
</head>
<body>
<h1>主机列表(对象)-business</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> <h1>主机列表(字典)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v2%}
<tr hid="{{row.nid}}" bid="{{row.b_id}}">
<td>{{row.hostname}}</td>
<td>{{row.b__caption}}</td>
</tr>
{% endfor %} </tbody>
</table> <h1>主机列表(元组)-business</h1>
<table border="1">
<thead>
<tr>
<th>主机名</th>
<th>业务线名称</th>
</tr>
</thead>
<tbody>
{% for row in v3%}
<tr hid="{{row.0}}" bid="{{row.2}}">
<td>{{row.1}}</td>
<td>{{row.3}}</td>
</tr>
{% endfor %}
</tbody>
</table> <div class="shade hide"></div>
<div class="add-modal 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 class="group">
<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:blue;color:white">悄悄提交</a>
<input id="cancel" type="button" value="取消"/>
<span id="error_msg" style="color:red"></span>
</form>
</div> <div class="edit-modal 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" style="display:inline-block;padding:5px;background:blue;color:white">确认编辑</a> </form>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#add_host').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').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-modal').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>
创建多对多示例
方式1：自定义关系表（想创建多少列就写多少列）
先创建一张Application的表，再创建一张hosttoapp表，做2表之间的关联。
python manage.py makemigrations
python manage.py migrate
方式2：自动创建关系表,第3张表自动生成。（默认只能自动创建3列，无法加额外的数据），无法直接对第3张表进行操作。因为没有那个类。
但是可以对第3张表进行间接的操作
对第3张表进行间接操作的方法：
obj=Application.objects.get(id=1)
obj.r.add(1) //增加application=1与host=1的1条对应关系
obj.r.add(2,3,4) //增加application=1与host=2,3,4的1条对应关系
obj.r.add(*[1,2,3,4]) //增加application=1与host=[1,2,3,4]的1条对应关系 obj.r.remove(1) //删除application=1与host=1的对应关系
obj.r.remove(2,4) //删除application=1与host=2,3的对应关系
obj.r.remove(*[1,2,3]) //删除application=1与host=[1,2,3]的对应关系 obj.r.clear() //清除application=1的下面的所有的对应关系 obj.r.set([3,5,7]) //相当于update，先把存在的数据都删除，再增加1-3,1-5,1-7的对应关系。 #所有相关的主机对象‘列表’，是QuerySet类型，不是真正的列表。obj.r后面可以跟的方法与application.objects.后面可跟的方法一样。
obj.r.all() //获取,obj.r 代表的是host对象。
创建一些数据备用
通过form表单实现提交，最终的效果：
粘贴部分程序：
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^business/', views.business),
url(r'^host/', views.host),
url(r'^test_ajax/',views.test_ajax),
url(r'^app/',views.app),
]
views.py
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
# Create your views here. def business(request):
v1 = models.Business.objects.all()
#QuerySet类型，里面存放的是对象。[obj(id,caption,code),obj,obj] v2 = models.Business.objects.all().values('id','caption')
# QuerySet类型，里面存放的是字典[{'id':1,'caption':'运维部'},{'id':1,'caption':'开发部'}..] v3 = models.Business.objects.all().values_list('id', 'caption')
# QuerySet类型，里面存放的是元组[(1,'运维部'),(2,'开发部').....] return render(request,'business.html',{'v1':v1,'v2':v2,'v3':v3}) # def host(request):
# v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
# # for row in v1:
# # print(row.b)
# # print(row.b.caption,row.b.code,sep='\t')
# # return HttpResponse("Host")
# v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
# #QuerySet:[{}]
# for row in v2:
# print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
#
# v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
#
# return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3}) def host(request):
if request.method=='GET':
v1=models.Host.objects.filter(nid__gt=0) #nid>0,其实代表的是所有数据
v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
v3 = models.Host.objects.filter(nid__gt=0).values_list('nid', 'hostname', 'b_id', 'b__caption')
b_list=models.Business.objects.all()
return render(request, 'host.html', {'v1': v1,'v2':v2,'v3':v3,'b_list':b_list})
elif request.method=='POST':
h=request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)
return redirect('/host/') 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)) def app(request):
if request.method=="GET":
app_list=models.Application.objects.all()
host_list=models.Host.objects.all()
#for row in app_list:
# print(row.name,row.r.all())
return render(request,'app.html',{"app_list":app_list,"host_list":host_list})
elif request.method=="POST":
app_name=request.POST.get('app_name')
host_list = request.POST.getlist('host_list')
obj=models.Application.objects.create(name=app_name)
obj.r.add(*host_list)
return redirect('/app/')
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.host-tag{
display:inline-block;
padding:3px;
border:1px solid red;
background-color:pink;
} .hide{
display:none;
}
.shade{
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
background:black;
opacity:0.6;
z-index:100;
}
.add-modal,.edit-modal{
position:fixed;
height:300px;
width:400px;
top:100px;
left:50%;
z-index:101;
border:1px solid red;
background:white;
margin-left:-200px;
} </style>
</head>
<body>
<h1>应用列表</h1>
<div>
<input id="add_app" type="button" value="添加"/>
</div>
<table border="1">
<thead>
<tr>
<th>应用名称</th>
<th>应用主机列表</th>
</tr>
</thead>
<tbody>
{% for app in app_list %}
<tr>
<td>{{app.name}}</td>
<td>
{% for host in app.r.all %}
<span class="host-tag">{{host.hostname}}</span>
{% endfor %}
</td>
</tr>
{% endfor %} </tbody> </table>
<div class="shade hide"></div>
<div class="add-modal hide">
<form id="add_form" method="POST" action="/app/">
<div class="group">
<input id="app_name" type="text" placeholder="应用名称" name="app_name"/>
</div> <div class="group">
<select id="host_list" name="host_list" multiple>
{% for op in host_list %}
<option value="{{op.nid}}">{{op.hostname}}</option>
{% endfor %} </select>
</div> <input type="submit" value="提交"/>
</form>
</div> <div class="edit-modal 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" style="display:inline-block;padding:5px;background:blue;color:white">确认编辑</a> </form>
</div> <script src="/static/jquery-1.12.4.js"></script>
<script>
$(function(){
$('#add_app').click(function(){
$('.shade,.add-modal').removeClass('hide');
});
$('#cancel').click(function(){
$('.shade,.add-modal').addClass('hide');
});
})
</script> </body>
</html>
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=32) class Host(models.Model):
nid=models.AutoField(primary_key=True)
hostname=models.CharField(max_length=32,db_index=True) #加上索引，可以提高查询速度
ip=models.GenericIPAddressField(protocol="ipv4",db_index=True)
port=models.IntegerField()
b=models.ForeignKey("Business",to_field='id') class Application(models.Model):
name=models.CharField(max_length=32)
r=models.ManyToManyField("Host") #2个业务,第3张表，维护前面2张表的关系。
# class HostToApp(models.Model):
# hobj=models.ForeignKey(to='Host',to_field='nid') #列名hobj_id
# aobj=models.ForeignKey(to='Application',to_field='id') #列名aobj_id
Day20-初识Ajax的更多相关文章
- Django补充及初识Ajax
Django创建一对多表结构 首先现在models.py中写如下代码: from django.db import models # Create your models here. class Bu ...
- Django（四） ORM 外键操作及初识Ajax
一.内容回顾 1.Django请求的生命周期: 路由系统 -> 视图函数(获取模板+数据 -> 渲染) -> 字符串返回给用户 2.路由系统: /index/ #-> 函数 ...
- 初识--Ajax & Json
1,AJAX是一种进行页面局部异步刷新技术. 用AJAX向服务器发送请求和获得服务器返回的数据并更新到页面中. 不是刷新整个页面,而是在HTML页面中使用JavaScript创建XMLHTTPRequ ...
- 初识Ajax技术
Ajax:(Asynchronous JavaScript And Xml)是一种整合了JavaScript.XML.CSS等现有技术 Ajax工作流程: 纯javaScript的Ajax请求 ...
- 初识ajax
ajax优势:不刷新整个页面,只刷新局部(无刷新) 无刷新的好处: 只更新部分页面,有效利用宽带 提供连续的用户体验 提供类似C/S的交互效果,操作更方面 什么是ajax AJAX :代表 Async ...
- python django初识ajax
什么是json json是轻量级文本数据交互格式 json独立语言 符合的json对象 ["one", "two", "three"] { ...
- Django之初识Ajax
1.简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据 ...
- [一]初识Ajax
是什么? 一种网页交换数据的技术 作用: 使页面局部刷新,获取后台数据 怎么做? 调用浏览器内置对象发送异步请求
- day059 ajax初识 登录认证练习
ajax初识 ajax有两个特点: 一个是异步,另一个是浏览器页面局部刷新(这个特点是用户感受不到的时候进行的) 示例: 页面输入两个整数,通过AJAX传输到后端计算结果并返回 在HTML文件中: & ...
- ajax技术初识与应用
一.ajax技术初识 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编 ...
随机推荐
- apache开启伪静态的方法 php篇
打开apache的配置文件httpd.conf 找到 #LoadModule rewrite_module modules/mod_rewrite.so 把前面#去掉.没有则添加,但必选独占一行,使a ...
- Android 7.1.1系统源码下载、编译、刷机-Nexus 6实战
想成为一位合格的Android程序员或者一位Android高级工程师是十分有必要知道Android的框架层的工作原理,要知道其工作原理那么就需要阅读Android的源代码. 想要阅读Android的源 ...
- win7升级到win10，出现算术运算溢出问题
前台winform,后台java代码是: OutputStream ou=(OutputStream)response.getOutputStream(); ou.write(rightSet.get ...
- 详细讲解 A/B 测试关键步骤，快来检查下还有哪些疏漏的知识点
作为一种对照实验方法,A/B 测试通过比较两个 (或多个) 不同版本之间的差异来验证假设是否正确.该方法将特定测试组从实验其余部分中独立出来,从而得出可靠结果.在被测人不知情且测试场景真实的情况下,A ...
- 转 gerrit
开发环境 https://blog.csdn.net/u013207966/article/details/79112740 先记录下我的开发环境以及要正确安装gerrit需要用到的工具: Redha ...
- centos7.2 apache开启.htaccess
打开httpd.conf(在那里? APACHE目录的CONF目录里面),用文本编纂器打开后,查找 (1) AllowOverride None 改为 AllowOverride All (2)去掉下 ...
- Scrum立会报告+燃尽图（十月二十七日总第十八次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...
- “Hello World！”团队第七周召开的第一次会议
今天是我们团队“Hello World!”团队第七周召开的第一次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.Todo List 六.会议照片 七.燃尽图 一.会议时间 ...
- 团队目标WBS及具体任务分工
• 首先我们讨论了实验第一个冲刺周期要实现的功能,我们的初期目标. • 然后我们进一步梳理了第一阶段的任务和需求. • 之后对任务进行了划分和领取. • 最后每个人对自己的任务进行了估算,并约定 ...
- float精度丢失的问题
在做IPTV的时候,遇到以下这个问题: 现有一个float型数据,以下代码打印输出: float n = 40272.48f; System.out.println(new Double(n * 10 ...