50、django工程（ajax）
50.1、ajax介绍：
1、ajax是在不跳转当前url地址的情况偷偷的往后台发送数据做增删改数据的操作，如果成功返回结果刷新当前页面，失败则提醒，
使用 id 或 name 属性。
2、模态对话框中的数据已经随页面的加载而加载。模态对话框(对话框添加，删除，修改)适合使用ajax向后台传送数据，form表单
提交数据是url跳转的方式，使用name属性。
3、ajax data 的 value 值只支持字符串、数字、数组，不支持字典，前端传过来的数据都可看作字符串。
4、ajax语法格式：
（1）前提：ajax的使用需要下载并引入jQuery。
（2）格式：
$.ajax({
url: '/add_classes.html/',
// 后台地址
type: 'POST',
// 发送数据的方式 post、get
data: {'username':'root','password': '123'},
// 向后台发送的key-value的数据形式，value支持字符串、数字、数组、不支持字典。
success:function(arg){
// 回调函数，arg是服务端返回的数据，返回的是字符串。
window.location.reload();
// 刷新界面
},
error:function(){
# 由于网络错误或url地址错误而触发的回调函数。
}
});
50.2、ajax 其它应用方式：
1、Python序列化：
（1）字符串 = json.dumps(对象)：
对象 -> 字符串
（2）对象 = json.loads(字符串)：
字符串 -> 对象
2、JavaScript：
（1）字符串 = JSON.stringify(对象)：
对象 -> 字符串
（2）对象 = JSON.parse(字符串)：
字符串 -> 对象
（3）应用场景(数据传输时)：
发送：字符串
接收：字符串 -> 对象
（4）用法：
1）发送数据时 data 中的 value 只是字符串或数字：
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
// 将arg转化为对象
}
});
2）发送数据时 data 中的 value 是数组(traditional:true,)：
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
traditional:true,
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
// 将arg转化为对象
}
});
3）发送数据时 data 中的 value 是字典：
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1': JSON.stringify({})},
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
// 将arg转化为对象
}
});
4）dataType: 'JSON',：
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
// 将arg直接转为对象
success:function(arg){
// arg是对象
}
});
3、事件委托：
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
50.3、小结：
1、使用新 URL 方式和对话框方式的区别：
（1）新 URL 方式：
1）独立的页面
2）数据量大或条目多
（2）对话框方式：
1）数据量小或条目少
2）增加，编辑
3）Ajax：考虑，当前页，td 中自定义属性
4）删除：对话框
2、示例：
（1）前端(.html)：
<script src="/static/js/jquery-3.1.1.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<script>
/*
javascript功能集合
*/
$(function () {
bindDel();
bindDelConfirm();
});
/*
绑定删除按钮点击事件
*/
function bindDel() {
$('#tb').on('click','.del-row',function () {
$('#delModal').modal('show');
// 回去当前行的ID
var rowId = $(this).parent().parent().attr('nid');
$('#delNid').val(rowId);
});
}
/*
绑定删除提交事件
*/
function bindDelConfirm() {
$('#delConfirm').click(function () {
var rowId = $('#delNid').val();
console.log(rowId);
$.ajax({
url: '/del_student/',
type: 'GET',
data: {'nid': rowId},
success:function (arg) {
var dict = JSON.parse(arg);
if(dict.status){
$('tr[nid="'+ rowId+'"]').remove();
}
$('#delModal').modal('hide');
}
});
});
}
</script>
（2）后端(views.py)：
from django.shortcuts import render
from django.shortcuts import HttpResponse
from app01 import models
import json
def del_student(request):
ret = {'status': True}
try:
nid = request.GET.get('nid')
models.Student.objects.filter(id=nid).delete()
except Exception as e:
ret['status'] = False
return HttpResponse(json.dumps(ret))
50.4、补充：
1、radio：是checked="checked"；ajax：$('#eidtModal :radio[value="1"]').prop('checked',true);。
2、selected：是selected="selected"；ajax：var values = $('#sel').val();。
3、zip：
4、JavaScript 字符串和对象之间的转换：
5、http响应：
6、FBV和SBV：
（1）
（2）
（3）
7、遍历表单：
var data = $('#fmForm表单的ID').serialize();
$.ajax({
data: $('#fm').serialize()
})
