JSON
import json
# 对象转字符串
str = json.dumps(dict,ensure_ascii=False)
# ensure_ascii=True或不设置
str = json.dumps(dict) # 这时前端拿到的是未解码的数据：{"key1":"\u7528\u6237\u8f93...", ...}
obj = json.loads(str) # 字符串转对象
js
JSON.parse(str) # 字符串转字典
JSON.stringify(dict) # 字典转字符串
页面错误提示
<span id="errormsg" style="color:red;"></span>
...
#JS
$('#errormsg').text("错误信息") # 在span元素中显示错误信息
JS代码操作表格行的添加和删除
...
<tbody id='tb'>
...
#JS
<script>
function createRow(data, nid) {
var tr = document.createElement('tr'); # 创建表格行
var tdId = document.createElement('td'); # 创建id单元格
tdId.innerHTML = nid;
$(tr).append(tdId)
var tdUser = document.createElement('td'); # 创建User单元格
tdUser.innerHTML = data.username;
$(tr).append(tdUser)
var tdAge = document.createElement('td'); # 创建年龄单元格
tdAge.innerHTML = data.age;
$(tr).append(tdAge)
var tdClass = document.createElement('td'); # 创建班级单元格
# 找到页面中name=cls_id的select，并从select中找到value=data.cls_id的option，取出这个option的text
var text = $('select[name="cls_id"]).find('option[value="'+data.cls_id+"']).text()
tdClass.innerHTML = text;
$(tr).append(tdClass)
...
# 添加行的删除和编辑按钮
var tdEdit = '<td style="font-size: 20px;"><a class="glyphicon glyphicon-remove icon"></a><a class="fa fa-pencil-square-o icon"></a></td>';
$(tr).append(tdEdit)
$('#tb').append(tr) # 将新行添加到表格中
}
</script>
删除行
# 给所有表格行的删除按钮添加 class：del—row
<td style="font-size: 20px;">
<a class="glyphicon glyphicon-remove icon del-row"></a>
<a class="fa fa-pencil-square-o icon"></a>
</td>
# 绑定删除按钮事件
<script>
$(function(){
...
bindDel();
...
}
function bindDel(){
$('.del-row').click(function(){
$('#delModal').modal('show');
// 获得当前行id
var rowID = $(this).parent().parent().attr('nid');
// 在模态框里添加了一个id=delNid的input隐藏标签，方便记录和给后台提交删除记录的id
$('#delNid').val(rowID);
})
}
</script>
事件委托
$(‘要绑定标签的上级标签’).on(‘click’, ‘要绑定的标签’, function() {})
# 旧版本
$(‘要绑定标签的上级标签’).delegate(‘要绑定的标签’, ‘click’, function() {})
JS添加行的完善
// 由于事件绑定只在网页加载完成的时候进行，
// 因此即使JS添加行时，给按钮添加了class：del-row,
// 该按钮的点击依然不会触发点击函数
// 完善：在事件绑定时，不会行的删除按钮进行点击绑定，改为给table添加事件委托
<script>
...
function bindDel(){
$('#tb').on('click', '.del-row', function(){
$('#delModal').modal('show');
// 获得当前行id
var rowID = $(this).parent().parent().attr('nid');
// 在模态框里添加了一个id=delNid的input隐藏标签，方便记录和给后台提交删除记录的id
$('#delNid').val(rowID);
})
}
</script>
模态框编辑数据相关
<body>
...
{% for row in stu_list %}
<tr nid="{{ row.id }}">
<td na="nid">{{ row.id }}</td>
<td na="user">{{ row.username }}</td>
<td na="age">{{ row.age }}</td>
<td na="gender">{{ row.gender }}</td>
<td na="cls_id" cid="{{ row.cls.id }}">{{ row.cls.title }}</td>
<td style="font-size: 20px;">
<a class="glyphicon glyphicon-remove icon del-row"></a>
<a class="fa fa-pencil-square-o icon edit-row"></a>
</td>
</tr>
{% endfor %}
...
<script>
function bindEdit(){
$('#tb').on('click','.edit-row',function () {
$('#editModal').modal('show');
// 获取当前行的所有数据
// 将数据赋值到对应对话框的指定位置
$(this).parent().prevAll().each(function () {
var v = $(this).text();
var n = $(this).attr('na');
if(n=='cls_id'){
var cid = $(this).attr('cid');
$('#editModal select[name="cls_id"]').val(cid);
}else if(n=='gender'){
if(v=='True'){
$('#editModal :radio[value="1"]').prop('checked',true);
}else{
$('#editModal :radio[value="0"]').prop('checked',true);
}
}else{
$("#editModal input[name='"+ n + "']").val(v)
}
});
})
}
</script>
</body>
其它
var list = [];
list.push("123") # 将python中append
# form
$('#form_id').serialize() // 将form中的数据存为字典，即get/post时发送请求的数据
window.location.href='http://www.*****.com'; // JS跳转