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()

})