<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通信电源信息</title>
<style>
.hidde{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modai{
position: fixed;
left: 50%;
top: 50%;
width: 500px;
height: 400px;
margin-left: -250px;
margin-top: -200px;
background-color: white;
z-index: 1000;
}
</style>
</head>
<body>
<a href="/add_electric/">添加</a> <a onclick="showmodai(); ">对话框添加</a>
<table border="1px">
<thead>
<tr>
<td>序号</td>
<td>类别</td>
<td>电压</td>
<td>厂家</td>
<td>电源型号</td>
<td>电源容量</td>
<td>整流模块型号</td>
<td>整流模块容量</td>
<td>满配整流模块数量</td>
<td>操作</td>
</tr>
</thead>
<tbody>
{% for row in electic_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.classes }}</td>
<td>{{ row.voltage }}</td>
<td>{{ row.manufacturer }}</td>
<td>{{ row.model }}</td>
<td>{{ row.capacity }}</td>
<td>{{ row.module_model }}</td>
<td>{{ row.module_capacity }}</td>
<td>{{ row.full_module_number }}</td>
<td><a href="/edite_electric/?nid={{ row.id }}">编辑</a>|<a href="/delete_electric/?nid={{ row.id }}">删除</a></td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="shadow hidde" id="shadow" ></div>
<div class="modai hidde" id="modai">
<h3>添加电源信息</h3>
<p>电压类型： <select name="classes" id="classes">
<option value="直流">直流</option>
<option value="交流">交流</option>
</select></p>
<p>电压： <select name="voltage" id="voltage">
<option value="48">48</option>
<option value="24">24</option>
<option value="220">220</option>
<option value="380">380</option>
</select></p>
<p>生产厂家: <input type="text" name="manufacturer" id="manufacturer"> </p>
<p>电源型号: <input type="text" name="model" id="model"> </p>
<p>机架容量: <input type="text" name="capacity" id="capacity"> </p>
<p>整流模块型号: <input type="text" name="module_model" id="module_model"> </p>
<p>整流模块容量: <input type="text" name="module_capacity" id="module_capacity"> </p>
<p>满配整流模块数量: <input type="text" name="full_module_number" id="full_module_number"> </p>
<input type="button" value="提交" onclick="ajaxsend();"> <input type="button" value="取消" onclick="canceladd();">
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function showmodai() {
document.getElementById(‘shadow‘).classList.remove(‘hidde‘);
document.getElementById(‘modai‘).classList.remove(‘hidde‘);
}
function ajaxsend() {
$.ajax({
url:‘/add_modai_electric/‘,
type:‘POST‘,
data:{‘classes‘:$(‘#classes‘).val(),
‘voltage‘:$(‘#voltage‘).val(),
‘manufacturer‘:$(‘#manufacturer‘).val(),
‘model‘:$(‘#model‘).val(),
‘capacity‘:$(‘#capacity‘).val(),
‘module_model‘:$(‘#module_model‘).val(),
‘module_capacity‘:$(‘#module_capacity‘).val(),
‘full_module_number‘:$(‘#full_module_number‘).val()},
success:function (arg) {
arg = JSON.parse(arg);
console.log(arg)
if (arg.status){
document.getElementById(‘shadow‘).classList.add(‘hidde‘);
document.getElementById(‘modai‘).classList.add(‘hidde‘);
location.href = ‘/electric_table/‘;
}
else {alert(arg.errormsg);}
}
})
}
function canceladd(){
document.getElementById(‘shadow‘).classList.add(‘hidde‘);
document.getElementById(‘modai‘).classList.add(‘hidde‘);
}
</script>
</body>
</html>
视图函数：
def add_modai_electric(request):
ret = {‘status‘:True,‘errormsg‘:None}
classes = request.POST.get(‘classes‘)
voltage = request.POST.get(‘voltage‘)
manufacturer = request.POST.get(‘manufacturer‘)
model = request.POST.get(‘model‘)
capacity = request.POST.get(‘capacity‘)
module_model = request.POST.get(‘module_model‘)
module_capacity = request.POST.get(‘module_capacity‘)
full_module_number = request.POST.get(‘full_module_number‘)
try:
conn = pymysql.connect(host=‘localhost‘, user=‘root‘, passwd=‘‘, database=‘communication‘, charset=‘utf8‘)
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute("insert into electric_info(classes,voltage,manufacturer,model,capacity,module_model,module_capacity,full_module_number) values(%s,%s,%s,%s,%s,%s,%s,%s) ", [classes,voltage,manufacturer,model,capacity,module_model,module_capacity,full_module_number])
conn.commit()
cursor.close()
conn.close()
except Exception as e:
ret[‘status‘] = False
ret[‘errormsg‘] = ‘处理异常‘
return HttpResponse(json.dumps(ret))
原文：https://www.cnblogs.com/hahapapaya/p/11342250.html