django进阶（三）之ajax基础，添加功能

ajax请求返回数据用httpresponse

 

urls.py

 

视图函数views.py

from django.shortcuts import render,redirect,HttpResponse

# Create your views here.
from cmdb import models

def service_info(request):        ##打印服务列表（非本节重点）

    v = models.Service.objects.all() 
    return render(request,'serviceinfo.html',{'v':v})

def host_info(request):            ##打印主机列表，并且可添加主机
    if request.method == 'GET':
        v1 = models.Host.objects.all()
        #(nid,hostname,ip,ssh_port,sid(对象))
        service_name = models.Service.objects.all()

        return render(request,'hostinfo.html',{'v1':v1,'service_name':service_name})
    elif request.method == 'POST':
        h = request.POST.get('hostname')
        ip = request.POST.get('ip')
        p = request.POST.get('ssh_port')
        s_id = request.POST.get('service_id')
        print(h, ip, p, s_id)
        models.Host.objects.create(hostname=h,ip=ip,ssh_port=p,sid_id=s_id)

        return redirect('/cmdb/hostinfo')

##ajax提交功能
def test_ajax(request):
    h = request.POST.get('hostname')        ##注意：这里蓝色涂鸦的属性为 从html中ajax所定义的属性的值来获取的，如下图所示
    ip = request.POST.get('ip')
    p = request.POST.get('ssh_port')
    s_id = request.POST.get('sid_id')

    if h and len(ip) > 8:
        print(h, ip, p, s_id)
        models.Host.objects.create(hostname=h, ip=ip, ssh_port=p, sid_id=s_id)
        return HttpResponse('submit_successful')
    else:
        return HttpResponse('提交格式不正确')        与ajax中的data是一个值

 

hostinfo.html

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .shade{                ##添加弹出框的遮罩层
            top:0;
            left: 0;
            right: 0;
            position: fixed;
            bottom: 0;
            background-color: green;
            opacity: 0.6;
            z-index: 100;
        }
        .add-host{
            top:25%;
            height: 300px;
            width: 400px;
            background-color: white;
            border:1px;
            position: fixed;
            left:50%;
            z-index: 101;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <h1>主机列表</h1>
    <div>
        <input id='add_host' type="button" value="添加"/>
    </div>
    <div>
        <table border="1" style="text-align: center">
            <thead>
                <tr>
                    <td>id</td>
                    <td>hostname</td>
                    <td>ip</td>
                    <td>ssh_port</td>
                    <td>服务名</td>
                </tr>
            </thead>
            <tbody>
                {% for row in v1 %}
                <tr host_id="{{ row.nid }}">
                    <td>{{ row.sid_id }}</td>
                    <td>{{ row.hostname }}</td>
                    <td>{{ row.ip }}</td>
                    <td>{{ row.ssh_port }}</td>
                    <td>{{ row.sid.caption }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="shade hide"></div>
    <div class="add-host hide" >
        <form action="/cmdb/hostinfo/" method="POST">
            <div>
                <input id='hname' type="text" name="hostname" placeholder="主机名"/>
            </div>
            <div>
                <input id='ip' type="text" name="ip" placeholder="主机ip"/>
            </div>
            <div>
                <input id='port' type="text" name="ssh_port" placeholder="远程端口"/>
            </div>
            <div>

                <select id='s_id' name="service_id">
                    {% for row in service_name %}
                        <option value="{{ row.id }}">{{ row.caption }}</option>
                    {% endfor %}
                </select>

            </div>
            <div>
                <input id='submit_host' type="submit" value="提交">
                <a id="ajax_submit" style="background-color: red">ajax提交</a>
                <input  id='cancel' type="button" value="取消">
            </div>
        </form>
    </div>

    <script src="/static/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            $('#add_host').click(function () {
                $('.shade,.add-host').removeClass('hide')
            });

        });

        $(function () {
            $('#submit_host,#cancel').click(function () {
                $('.shade,.add-host').addClass('hide')
            })
        });
##ajax添加功能测试
        $('#ajax_submit').click(function () {
           $.ajax({
               url:'/cmdb/test_ajax/',
               type:'POST',
               data:{'hostname':$('#hname').val(),'ip':$('#ip').val(),'ssh_port':$('#port').val(),'sid_id':$('#s_id').val()},
               success:function (data) {     /*此处必须传参数，相当于回调函数，提交成功后的返回值*/
                   if(data == 'submit_successful'){
                       location.reload()    /* 本地刷新*/
                   }else{
                       alert(data);    /*此处的data的值会从views里获取，即服务给返回*/
                   }
               }
           })
        })

    </script>
</body>

 

posted @ 2018-05-02 15:30  FRESHMANS  阅读(255)  评论(0)    收藏  举报