python学习笔记_week20-程序员宅基地

note

1、Django请求的生命周期
        路由系统 -> 视图函数(获取模板+数据=》渲染) -> 字符串返回给用户        
2、路由系统
        /index/                ->  函数或类.as_view()
        /detail/(\d+)          ->  函数(参数) 或 类.as_view()（参数）
        /detail/(?P<nid>\d+)   ->  函数(参数) 或 类.as_view()（参数）
        /detail/               ->  include("app01.urls") #路由的分发
        /detail/    name='a1'  ->  include("app01.urls")
                                - 视图中：reverse 
                                - 模板中：{% url "a1" %}                               
3、视图
    FBV：函数
        def index(request,*args,**kwargs):
            ..    
    CBV：类
        class Home(views.View):            
            def get(self,reqeust,*args,**kwargs):
                ..                
    获取用户请求中的数据：
        request.POST.get
        request.GET.get
        reqeust.FILES.get()        
        # checkbox,
        ........getlist() #多选        
        request.path_info                
        文件对象 = reqeust.FILES.get()
        文件对象.name
        文件对象.size
        文件对象.chunks()        
        # <form 特殊的设置></form>                
    给用户返回数据：
        render(request, "模板的文件的路径", {
        'k1': [1,2,3,4],"k2": {
        'name': '张扬','age': 73}})
        redirect("URL")
        HttpResponse(字符串)            
4、模板语言
        render(request, "模板的文件的路径", {
        'obj': 1234, 'k1': [1,2,3,4],"k2": {
        'name': '张扬','age': 73}})    
    <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
    a. 创建类和字段
        class User(models.Model):
            age = models.IntergerFiled() #不需要指定长度
            name = models.CharField(max_length=10)#字符长度            
        Python manage.py makemigrations
        python manage.py migrate        
        # settings.py 注册APP        
    b. 操作    
        增
            models.User.objects.create(name='qianxiaohu',age=18)
            
            dic = {
        'name': 'xx', 'age': 19}
            models.User.objects.create(**dic)
             
            obj = models.User(name='qianxiaohu',age=18)
            obj.save()
        删
            models.User.objects.filter(id=1).delete()
        改
            models.User.objects.filter(id__gt=1).update(name='alex',age=84)
            dic = {
        'name': 'xx', 'age': 19}
            models.User.objects.filter(id__gt=1).update(**dic)
        查
            models.User.objects.filter(id=1,name='root')
            models.User.objects.filter(id__gt=1,name='root')
            models.User.objects.filter(id__lt=1)
            models.User.objects.filter(id__gte=1) #大于等于
            models.User.objects.filter(id__lte=1) #小于等于    
            
            models.User.objects.filter(id=1,name='root')
            dic = {
        'name': 'xx', 'age__gt': 19}
            models.User.objects.filter(**dic)                        
            v1 = models.Business.objects.all()    # QuerySet ,内部元素都是对象                                
            v2 = models.Business.objects.all().values('id','caption') # QuerySet ,内部元素都是字典                        
            v3 = models.Business.objects.all().values_list('id','caption')    # QuerySet ,内部元素都是元组
            
            models.Business.objects.get(id=1)# 获取到的一个对象，如果不存在就报错
            models.Business.objects.filter(id=1).first() #对象或者None
            
            外键：
                v = models.Host.objects.filter(nid__gt=0)
                v[0].b.caption  ---->  通过.进行跨表                                                                        
        外键：
            class UserType(models.Model):
                caption = models.CharField(max_length=32)
              id  caption
            # 1，普通用户
            # 2，VIP用户
            # 3， 游客                
            class User(models.Model):
                age = models.IntergerFiled()
                name = models.CharField(max_length=10)#字符长度
                # user_type_id = models.IntergerFiled() # 约束，
                user_type = models.ForeignKey("UserType",to_field='id') # 约束，        
              name age  user_type_id     
            # 张扬  18     3
            # 张A扬 18     2
            # 张B扬 18     2                
张扬：
    position:fixed absolute relative            
    Ajax    
        $.ajax({
            url: '/host',
            type: "POST",
            data: {
         'k1': 123,'k2': "root"},
            success: function(data){           #等着服务端返回信息自动执行
                // data是服务器端返回的字符串
                var obj = JSON.parse(data);
            }
        })            
        建议：永远让服务器端返回一个字典        
        return HttpResponse(json.dumps(字典)) #不能用redirect；用render时，用不了JSON                                
多对多：
    创建多对多：
        方式一：自定义关系表
            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(to="Business", to_field='id')
            # 10
            class Application(models.Model):
                name = models.CharField(max_length=32)
            # 2            
            class HostToApp(models.Model):
                hobj = models.ForeignKey(to='Host',to_field='nid')
                aobj = models.ForeignKey(to='Application',to_field='id')                
            # HostToApp.objects.create(hobj_id=1,aobj_id=2)                                                                                                                                
                
        方式二：自动创建关系表
            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(to="Business", to_field='id')
            # 10
            class Application(models.Model):
                name = models.CharField(max_length=32)
                r = models.ManyToManyField("Host")                
            无法直接对第三张表进行操作            
            obj = Application.objects.get(id=1)
            obj.name            
            # 第三张表操作
            obj.r.add(1)
            obj.r.add(2)
            obj.r.add(2,3,4)
            obj.r.add(*[1,2,3,4])            
            obj.r.remove(1)
            obj.r.remove(2,4)
            obj.r.remove(*[1,2,3])            
            obj.r.clear()            
            obj.r.set([3,5,7])  #只有3,5,7            
            # 所有相关的主机对象“列表” QuerySet
            obj.r.all()
作业：
    1、主机管理：增删改查
    2、应用管理：增删改查
    Ajax方式：数据量小
    新URL方式：数据量大

View Code

models

 1 from django.db import models
 2 # Create your models here.
 3 # class Foo(models.Model):
 4 #     name = models.CharField(max_length=1)
 5 class Business(models.Model):
 6     # id
 7     caption = models.CharField(max_length=32)
 8     code = models.CharField(max_length=32,null=True,default="SA")
 9     # fk = models.ForeignKey('Foo')
10 class Host(models.Model):
11     nid = models.AutoField(primary_key=True)
12     hostname = models.CharField(max_length=32,db_index=True) #db_index创建索引
13     ip = models.GenericIPAddressField(protocol="both",db_index=True)
14     port = models.IntegerField()
15     b = models.ForeignKey(to="Business", to_field='id',on_delete=models.CASCADE)
16 # 10
17 class Application(models.Model):
18     name = models.CharField(max_length=32)
19     r = models.ManyToManyField("Host")
20 # 2
21 # class HostToApp(models.Model):
22 #     hobj = models.ForeignKey(to='Host',to_field='nid')
23 #     aobj = models.ForeignKey(to='Application',to_field='id')
24 
25 # hid: 1~10  aid:1~2

View Code

views

 1 from django.shortcuts import render,HttpResponse,redirect
 2 from app01 import models
 3 import json
 4 # Create your views here.
 5 def business(request):
 6     v1 = models.Business.objects.all()
 7     # QuerySet
 8     # [obj(id,caption,code),obj(id,caption,code),obj(id,caption,code) ]
 9 
10     v2 = models.Business.objects.all().values('id','caption')
11     # QuerySet
12     # [{'id':1,'caption': ' 运维部'},{'id':1,'caption': '运维部'},...]
13 
14     v3 = models.Business.objects.all().values_list('id','caption')
15     # QuerySet
16     # [(1,运维部),(2,开发)]
17     return render(request, 'business.html', {
        'v1': v1,'v2': v2, 'v3': v3})
18 # def host(request):
19 #     v1 = models.Host.objects.filter(nid__gt=0)
20 #     # QuerySet [hostobj(ip.host,另外一个对象(..)),]
21 #     # for row in v1:
22 #     #     print(row.nid,row.hostname,row.ip,row.port,row.b_id,row.b.caption,row.b.code,row.b.id,sep='\t')
23 #     #     print(row.b.fk.name)
24 #     # return HttpResponse("Host")
25 #     v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
26 #     # QuerySet: [ {} ]
27 #     # print(v2)
28 #     # for row in v2:
29 #     #     print(row['nid'],row['hostname'],row['b_id'],row['b__caption'])
30 #     v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
31 #     # QuerySet: [ () ]
32 #     return render(request, 'host.html', {'v1': v1,'v2': v2,'v3': v3})
33 def host(request):
34     if request.method == "GET":
35         v1 = models.Host.objects.filter(nid__gt=0)
36         v2 = models.Host.objects.filter(nid__gt=0).values('nid','hostname','b_id','b__caption')
37         v3 = models.Host.objects.filter(nid__gt=0).values_list('nid','hostname','b_id','b__caption')
38         b_list = models.Business.objects.all()
39         return render(request, 'host.html', {
        'v1': v1,'v2': v2,'v3': v3,'b_list':b_list})
40     elif request.method == "POST":
41         h = request.POST.get('hostname')
42         i = request.POST.get('ip')
43         p = request.POST.get('port')
44         b = request.POST.get('b_id')
45         # models.Host.objects.create(hostname=h,
46         #                            ip=i,
47         #                            port=p,
48         #                            b=models.Business.objects.get(id=b)
49         #                            )
50         models.Host.objects.create(hostname=h,
51                                    ip=i,
52                                    port=p,
53                                    b_id=b
54                                    )
55         return redirect('/host')
56 def test_ajax(request):
57     ret = {
        'status': True, 'error': None, 'data': None}
58     try:
59         h = request.POST.get('hostname')
60         i = request.POST.get('ip')
61         p = request.POST.get('port')
62         b = request.POST.get('b_id')
63         if h and len(h) > 5:
64             models.Host.objects.create(hostname=h,
65                                            ip=i,
66                                            port=p,
67                                            b_id=b)
68         else:
69             ret['status'] = False
70             ret['error'] = "太短了"
71     except Exception as e:
72         ret['status'] = False
73         ret['error'] = '请求错误'
74     return HttpResponse(json.dumps(ret))
75 def app(request):
76     if request.method == "GET":
77         app_list = models.Application.objects.all()
78         # for row in app_list:
79         #     print(row.name,row.r.all())
80         host_list = models.Host.objects.all()
81         return render(request,'app.html',{
        "app_list": app_list,'host_list': host_list})
82     elif request.method == "POST":
83         app_name = request.POST.get('app_name')
84         host_list = request.POST.getlist('host_list')
85         print(app_name,host_list)
86         obj = models.Application.objects.create(name=app_name)
87         obj.r.add(*host_list)
88         return redirect('/app')
89 def ajax_add_app(request):
90     ret = {
        'status':True, 'error':None, 'data': None}
91     app_name = request.POST.get('app_name')
92     host_list = request.POST.getlist('host_list')
93     obj = models.Application.objects.create(name=app_name)
94     obj.r.add(*host_list)
95     return HttpResponse(json.dumps(ret))

View Code

settings

  1 import os
  2 
  3 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  4 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  5 
  6 
  7 # Quick-start development settings - unsuitable for production
  8 # See https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/
  9 
 10 # SECURITY WARNING: keep the secret key used in production secret!
 11 SECRET_KEY = '-j(nkf+hepu(^e=qr0s)$0bfb_%8*x0f@$22cf+3bn_-+i=d&0'
 12 
 13 # SECURITY WARNING: don't run with debug turned on in production!
 14 DEBUG = True
 15 
 16 ALLOWED_HOSTS = []
 17 
 18 
 19 # Application definition
 20 
 21 INSTALLED_APPS = [
 22     'django.contrib.admin',
 23     'django.contrib.auth',
 24     'django.contrib.contenttypes',
 25     'django.contrib.sessions',
 26     'django.contrib.messages',
 27     'django.contrib.staticfiles',
 28     'app01',
 29 ]
 30 MIDDLEWARE = [
 31     'django.middleware.security.SecurityMiddleware',
 32     'django.contrib.sessions.middleware.SessionMiddleware',
 33     'django.middleware.common.CommonMiddleware',
 34     #'django.middleware.csrf.CsrfViewMiddleware',
 35     'django.contrib.auth.middleware.AuthenticationMiddleware',
 36     'django.contrib.messages.middleware.MessageMiddleware',
 37     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 38 ]
 39 
 40 ROOT_URLCONF = 's14day20.urls'
 41 
 42 TEMPLATES = [
 43     {
 44         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 45         'DIRS': [os.path.join(BASE_DIR, 'templates')]
 46         ,
 47         'APP_DIRS': True,
 48         'OPTIONS': {
 49             'context_processors': [
 50                 'django.template.context_processors.debug',
 51                 'django.template.context_processors.request',
 52                 'django.contrib.auth.context_processors.auth',
 53                 'django.contrib.messages.context_processors.messages',
 54             ],
 55         },
 56     },
 57 ]
 58 
 59 WSGI_APPLICATION = 's14day20.wsgi.application'
 60 
 61 
 62 # Database
 63 # https://docs.djangoproject.com/en/1.10/ref/settings/#databases
 64 
 65 DATABASES = {
 66     'default': {
 67         'ENGINE': 'django.db.backends.sqlite3',
 68         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
 69     }
 70 }
 71 
 72 
 73 # Password validation
 74 # https://docs.djangoproject.com/en/1.10/ref/settings/#auth-password-validators
 75 
 76 AUTH_PASSWORD_VALIDATORS = [
 77     {
 78         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 79     },
 80     {
 81         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 82     },
 83     {
 84         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
 85     },
 86     {
 87         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
 88     },
 89 ]
 90 
 91 
 92 # Internationalization
 93 # https://docs.djangoproject.com/en/1.10/topics/i18n/
 94 
 95 LANGUAGE_CODE = 'en-us'
 96 
 97 TIME_ZONE = 'UTC'
 98 
 99 USE_I18N = True
100 
101 USE_L10N = True
102 
103 USE_TZ = True
104 
105 
106 # Static files (CSS, JavaScript, Images)
107 # https://docs.djangoproject.com/en/1.10/howto/static-files/
108 
109 STATIC_URL = '/static/'
110 STATICFILES_DIRS = (
111     os.path.join(BASE_DIR, 'static'),
112 )

View Code

urls

 1 from django.conf.urls import url
 2 from django.contrib import admin
 3 from app01 import views
 4 urlpatterns = [
 5     url(r'^admin/', admin.site.urls),
 6     url(r'^business$', views.business),
 7     url(r'^host$', views.host),
 8     url(r'^test_ajax$', views.test_ajax),
 9     url(r'^app$', views.app),
10     url(r'^ajax_add_app$', views.ajax_add_app),
11     # url(r'^business_add', views.business),
12 ]

View Code

app

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .host-tag{
         
  8             display: inline-block;
  9             padding: 3px;
 10             border: 1px solid red;
 11             background-color: palevioletred;
 12         }
 13         .hide{
         
 14             display: none;
 15         }
 16         .shade{
         
 17             position: fixed;
 18             top: 0;
 19             right: 0;
 20             left: 0;
 21             bottom: 0;
 22             background: black;
 23             opacity: 0.6;
 24             z-index: 100;
 25         }
 26         .add-modal,.edit-modal{
         
 27             position: fixed;
 28             height: 300px;
 29             width: 400px;
 30             top:100px;
 31             left: 50%;
 32             z-index: 101;
 33             border: 1px solid red;
 34             background: white;
 35             margin-left: -200px;
 36         }
 37     </style>
 38 </head>
 39 <body>
 40     <h1>应用列表</h1>
 41      <div>
 42         <input id="add_app" type="button" value="添加" />
 43     </div>
 44     <table border="1">
 45         <thead>
 46             <tr>
 47                 <td>应用名称</td>
 48                 <td>应用主机列表</td>
 49             </tr>
 50         </thead>
 51         <tbody>
 52             {% for app in app_list %}
 53                 <tr aid="{
         { app.id }}">
 54                     <td>{
        { app.name }}</td>
 55                     <td>
 56                         {% for host in app.r.all %}
 57                             <span class="host-tag" hid="{
         { host.nid }}"> {
        { host.hostname }} </span>
 58                         {% endfor %}
 59                     </td>
 60                     <td>
 61                         <a class="edit">编辑</a>
 62                     </td>
 63                 </tr>
 64             {% endfor %}
 65         </tbody>
 66     </table>
 67     <div class="shade hide"></div>
 68     <div class="add-modal hide">
 69         <form id="add_form" method="POST" action="/app">
 70             <div class="group">
 71                 <input id="app_name" type="text" placeholder="应用名称" name="app_name" />
 72             </div>
 73             <div class="group">
 74                 <select id="host_list" name="host_list" multiple>
 75                     {% for op in host_list %}
 76                         <option value="{
         { op.nid }}">{
        { op.hostname }}</option>
 77                     {% endfor %}
 78                 </select>
 79             </div>
 80             <input type="submit" value="提交" />
 81             <input id="add_submit_ajax" type="button" value="Ajax提交" />
 82         </form>
 83     </div>
 84     <div class="edit-modal hide">
 85         <form id="edit_form" method="POST" action="/host">
 86                 <input type="text" name="nid" style="display:none" />
 87                 <input type="text" placeholder="应用名称" name="app" />
 88                 <select name="host_list" multiple>
 89                     {% for op in host_list %}
 90                         <option value="{
         { op.nid }}">{
        { op.hostname }}</option>
 91                     {% endfor %}
 92                 </select>
 93             <a id="ajax_submit_edit" >确认编辑</a>
 94         </form>
 95     </div>
 96      <script src="/static/jquery-1.12.4.js"></script>
 97     <script>
 98         $(function(){
 99             $('#add_app').click(function(){
100                 $('.shade,.add-modal').removeClass('hide');
101             });
102             $('#cancel').click(function(){
103                 $('.shade,.add-modal').addClass('hide');
104             });
105             $('#add_submit_ajax').click(function(){
106                 $.ajax({
107                     url: '/ajax_add_app',
108                     // data: {'user': 123,'host_list': [1,2,3,4]},
109                     data: $('#add_form').serialize(),
110                     type: "POST",
111                     dataType: 'JSON', // jQuery内部自动做
112                     traditional: true, //发列表
113                     success: function(obj){
114                         console.log(obj);
115                     },
116                     error: function () {
117                     }
118                 })
119             });
120             $('.edit').click(function(){
121                 $('.edit-modal,.shade').removeClass('hide');
122                 var hid_list = [];
123                 $(this).parent().prev().children().each(function(){
124                     var hid = $(this).attr('hid');
125                     hid_list.push(hid)
126                 });
127                 $('#edit_form').find('select').val(hid_list);
128                 // 如果发送到后台
129                 /*
130                 obj = models.Application.objects.get(id=aid)
131                 obj.name = "新Name"
132                 obj.save()
133                 obj.r.set([1,2,3,4])
134                 */
135             })
136         })
137     </script>
138 </body>
139 </html>

View Code

business

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <h1>业务线列表(对象)</h1>
 9     <ul>
10         {% for row in v1 %}
11             <li>{
        { row.id }} - {
        { row.caption }} - {
        { row.code }}</li>
12         {% endfor %}
13     </ul>
14     <h1>业务线列表（字典）</h1>
15     <ul>
16         {% for row in v2 %}
17             <li>{
        { row.id }} - {
        { row.caption }}</li>
18         {% endfor %}
19     </ul>
20     <h1>业务线列表（元组）</h1>
21     <ul>
22         {% for row in v3 %}
23             <li>{
        { row.0 }} - {
        { row.1 }}</li>
24         {% endfor %}
25     </ul>
26 </body>
27 </html>

View Code

host

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7         .hide{
         
  8             display: none;
  9         }
 10         .shade{
         
 11             position: fixed;
 12             top: 0;
 13             right: 0;
 14             left: 0;
 15             bottom: 0;
 16             background: black;
 17             opacity: 0.6;
 18             z-index: 100;
 19         }
 20         .add-modal,.edit-modal{
         
 21             position: fixed;
 22             height: 300px;
 23             width: 400px;
 24             top:100px;
 25             left: 50%;
 26             z-index: 101;
 27             border: 1px solid red;
 28             background: white;
 29             margin-left: -200px;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <h1>主机列表(对象)</h1>
 35     <div>
 36         <input id="add_host" type="button" value="添加" />
 37     </div>
 38     <table border="1">
 39         <thead>
 40             <tr>
 41                 <th>序号</th>
 42                 <th>主机名</th>
 43                 <th>IP</th>
 44                 <th>端口</th>
 45                 <th>业务线名称</th>
 46                 <th>操作</th>
 47             </tr>
 48         </thead>
 49         <tbody>
 50                 {% for row in v1 %}
 51                     <tr hid="{
         { row.nid }}" bid="{
         { row.b_id }}">
 52                         <td>{
        { forloop.counter }}</td> {# 计数 #}
 53                         <td>{
        { row.hostname }}</td>
 54                         <td>{
        { row.ip }}</td>
 55                         <td>{
        { row.port }}</td>
 56                         <td>{
        { row.b.caption }}</td>
 57                         <td>
 58                             <a class="edit">编辑</a>|<a class="delete">删除</a>
 59                         </td>
 60                     </tr>
 61                 {% endfor %}
 62         </tbody>
 63     </table>
 64     <h1>主机列表(字典)</h1>
 65     <table border="1">
 66         <thead>
 67             <tr>
 68                 <th>主机名</th>
 69                 <th>业务线名称</th>
 70             </tr>
 71         </thead>
 72         <tbody>
 73             {% for row in v2 %}
 74                 <tr hid="{
         { row.nid }}" bid="{
         { row.b_id }}">
 75                     <td>{
        { row.hostname }}</td>
 76                     <td>{
        { row.b__caption }}</td>
 77                 </tr>
 78             {% endfor %}
 79         </tbody>
 80     </table>
 81     <h1>主机列表(元组)</h1>
 82     <table border="1">
 83         <thead>
 84             <tr>
 85                 <th>主机名</th>
 86                 <th>业务线名称</th>
 87             </tr>
 88         </thead>
 89         <tbody>
 90             {% for row in v3 %}
 91                 <tr hid="{
         { row.0 }}" bid="{
         { row.2 }}">
 92                     <td>{
        { row.1 }}</td>
 93                     <td>{
        { row.3 }}</td>
 94                 </tr>
 95             {% endfor %}
 96         </tbody>
 97     </table>
 98     <div class="shade hide"></div>
 99     <div class="add-modal hide">
100         <form id="add_form" method="POST" action="/host"> {# 以form提交，页面会刷新 #}
101             <div class="group">
102                 <input id="host" type="text" placeholder="主机名" name="hostname" />
103             </div>
104             <div class="group">
105                 <input id="ip" type="text" placeholder="IP" name="ip" />
106             </div>
107             <div class="group">
108                 <input id="port" type="text" placeholder="端口" name="port" />
109             </div>
110             <div class="group">
111                 <select id="sel" name="b_id">
112                     {% for op in b_list %}
113                     <option value="{
         { op.id }}">{
        { op.caption }}</option>
114                     {% endfor %}
115                 </select>
116             </div>
117             <input type="submit" value="提交" />
118             <a id="ajax_submit" >悄悄提交</a>
119             <input id="cancel" type="button" value="取消" />
120             <span id="erro_msg" style="color: red"></span>
121         </form>
122     </div>
123     <div class="edit-modal hide">
124         <form id="edit_form" method="POST" action="/host">
125                 <input type="text" name="nid" style="display:none" />
126                 <input type="text" placeholder="主机名" name="hostname" />
127                 <input type="text" placeholder="IP" name="ip" />
128                 <input  type="text" placeholder="端口" name="port" />
129                 <select name="b_id">
130                     {% for op in b_list %}
131                     <option value="{
         { op.id }}">{
        { op.caption }}</option>
132                     {% endfor %}
133                 </select>
134             <a id="ajax_submit_edit" >确认编辑</a>
135         </form>
136     </div>
137     <script src="/static/jquery-1.12.4.js"></script>
138     <script>
139         $(function(){
140             $('#add_host').click(function(){
141                 $('.shade,.add-modal').removeClass('hide');
142             });
143             $('#cancel').click(function(){
144                 $('.shade,.add-modal').addClass('hide');
145             });
146             $('#ajax_submit').click(function(){
147                 $.ajax({
148                     url: "/test_ajax",
149                     type: 'POST',
150                     //data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
151                     data: $('#add_form').serialize(),{# 会把form所有的值打包发给后台 #}
152                     success: function(data){     {# 服务器返回的消息在data中 #}
153                         var obj = JSON.parse(data); {# 字符串转化为对象 #}
154                         if(obj.status){
155                             location.reload();
156                         }else{
157                             $('#erro_msg').text(obj.error);
158                         }
159                     }
160                 })
161             });
162             $('.edit').click(function(){
163                 $('.shade,.edit-modal').removeClass('hide');
164                 var bid = $(this).parent().parent().attr('bid');
165                 var nid = $(this).parent().parent().attr('hid');
166                 $('#edit_form').find('select').val(bid);
167                 $('#edit_form').find('input[name="nid"]').val(nid);
168                 // 修改
169                 /*
170                 $.ajax({
171                     data: $('#edit_form').serialize()
172                 });
173                 */
174                 // models.Host.objects.filter(nid=nid).update()
175             })
176         })
177     </script>
178 </body>
179 </html>

View Code

posted on 2017-12-30 22:01 我很好u 阅读( ...) 评论( ...) 编辑收藏

python学习笔记_week20-程序员宅基地

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

deepin/ubuntu安装苹方字体-程序员宅基地

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

docker — 容器存储_docker 保存容器-程序员宅基地

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

如何将EXCEL表导入plsql数据库中-程序员宅基地

Git常用命令速查手册-程序员宅基地

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

【C++缺省函数】空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

推荐文章

热门文章

相关标签