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

 

posted on 2017-09-30 11:21  momo8238  阅读(183)  评论(0编辑  收藏  举报