ajax方式
models.py
from __future__ import unicode_literals
from django.db import models
# Create your models here.
class Host(models.Model):
hostname = models.CharField(max_length=32, unique=True)
ip = models.GenericIPAddressField(max_length=20, unique=True)
port = models.IntegerField()
category = models.ForeignKey('Category')
def __unicode__(self):
return self.hostname
class Category(models.Model):
name = models.CharField(max_length=32, unique=True)
def __unicode__(self):
return self.name
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'^$', views.index, name="index"),
url(r'^del/$', views.ajax_del_host, name="ajax_del_host"),
url(r'^create_host/$', views.ajax_create_host, name="ajax_create_host"),
url(r'^edit/$', views.ajax_edit, name="ajax_edit"),
]
views.py
def ajax_edit(request):
hid = request.POST.get('hid')
hostname = request.POST.get('hostname2')
port = request.POST.get('port2')
ip = request.POST.get('ip2')
cid2 = request.POST.get('cid2')
print(hid, hostname, cid2, ip, port)
res = {'status': True, 'error': None, 'data': None}
try:
Host.objects.filter(id=hid).update(hostname=hostname, port=port, ip=ip, category_id=cid2)
except Exception as e:
res['status'] = False
res['error'] = '更新失敗'
return HttpResponse(json.dumps(res))
template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<td>序號</td>
<td>cid</td>
<td>name</td>
<td>ip</td>
<td>port</td>
<td>category</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</thead>
<tbody>
{% for host in hosts %}
<tr hid="{{ host.id }}" cid="{{ host.category_id }}" hostname2="{{ host.hostname }}" ip2="{{ host.ip }}" port2="{{ host.port }}">
<td>{{ forloop.counter }}</td>
<td>{{ host.category_id }}</td>
<td>{{ host.hostname }}</td>
<td>{{ host.ip }}</td>
<td>{{ host.port }}</td>
<td>{{ host.category.name }}</td>
<td><a class="del">刪除</a></td>
<td><button type="button" class="btn btn-primary btn-sm edit" data-toggle="modal" data-target="#myModal2">編輯</button></td>
</tr>
{% endfor %}
</tbody>
</table>
<span id="error"></span>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
創建主機
</button>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">創建主機</h4>
</div>
<div class="modal-body">
<form id="aform" class="form-group" action="" method="post">
hostname:<input id="hostname" type="text" class="form-control" name="hostname"><br>
ipaddress:<input id="ip" type="text" class="form-control" name="ip"><br>
port:<input id="port" type="text" class="form-control" name="port"><br>
<select id="category" name="category" class="form-control-static">
{% for category in categorys %}
<option value="{{ category.id }}">{{ category }}</option>
{% endfor %}
</select>
</form>
</div>
<div class="modal-footer">
<button id="btn1_d" type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button id="btn1" type="button" class="btn btn-primary">確定</button>
</div>
</div>
</div>
</div>
<!-- Modal2 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">編輯主機</h4>
</div>
<div class="modal-body">
<form id="edit_form" class="form-group" action="" method="post">
hostname:<input type="text" class="form-control" name="hostname2"><br>
ipaddress:<input type="text" class="form-control" name="ip2"><br>
port:<input type="text" class="form-control" name="port2"><br>
<select class="form-control-static" name="category2" >
{% for category in categorys %}
<option value="{{ category.id }}">{{ category }}</option>
{% endfor %}
</select>
</form>
</div>
<div class="modal-footer">
<button id="btn2_d" type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button id="btn2_n" type="button" class="btn btn-primary">確定</button>
</div>
</div>
</div>
</div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.del').click(function(){
var hid = $(this).parent().parent().attr('hid');
$.ajax({
url: '{% url 'ajax_del_host' %}',
type: 'POST',
data: {csrfmiddlewaretoken: '{{ csrf_token }}', 'hid': hid},
{# data: $('#aform').serialize(),#}
success: function(data){
var res = JSON.parse(data);
if(res.status){
location.reload();
}else{
$('#error').text(res.mess);
}
}
})
});
$('#btn1').click(function(){
$.ajax({
url: '/create_host/',
type: 'POST',
data: {csrfmiddlewaretoken: '{{ csrf_token }}','hostname':$('#hostname').val(),'ip': $('#ip').val(), 'port': $('#port').val(), 'category': $('#category').val()},
{# data: $('#aform').serialize(),#}
success: function(data){
var obj = JSON.parse(data);
if(obj.status){
location.reload();
}else{
$('#btn1_d').trigger('click');
$('#error').text(obj.error);
}
}
})
});
$('.edit').click(function(){
var cid = $(this).parent().parent().attr('cid');
$('#edit_form').find('select').val(cid);
var hid = $(this).parent().parent().attr('hid');
var hostname = $(this).parent().parent().attr('hostname2');
var port = $(this).parent().parent().attr('port2');
var ip = $(this).parent().parent().attr('ip2');
$('#edit_form input[name="hostname2"]').val(hostname);
$('#edit_form input[name="ip2"]').val(ip);
$('#edit_form input[name="port2"]').val(port);
$('#btn2_n').click(function(){
var hostname2 = $('#edit_form input[name="hostname2"]').val();
var ip2 = $('#edit_form input[name="ip2"]').val();
var port2 = $('#edit_form input[name="port2"]').val();
var cid2 = $('#edit_form select').val();
$.ajax({
url: '/edit/',
type: 'POST',
data: {csrfmiddlewaretoken: '{{ csrf_token }}','hid': hid, 'hostname2':hostname2,'ip2': ip2, 'port2': port2, 'cid2': cid2},
{# data: $('#aform').serialize(),#}
success: function(data){
var obj = JSON.parse(data);
if(obj.status){
location.reload();
}else{
{# $('#btn2_d').trigger('click');#}
$('#error').text(obj.error);
}
}
})
});
});
});
</script>
</html>
