用ajax异步请求获取所有学生信息和并实现删除学生信息的操作，本实例所用的接口是文章DJango中实现restful中的接口。
一、ajax的4种请求
html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展示所有学生信息</title>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript">
<!-- 方法一：get请求 -->
$(function () {
$('#showStus').click(function () {
{#ajax 异步请求 get/post/put/patch等请求方式，传入两个参数，第一个参数是接口url，第二个参数是function#}
$.get('/stuapp/student/', function (msg) {
s = '<table><tr><td>ID</td><td>姓名</td><td>电话</td><td>操作</td></tr>'
for(var i = 0; i<msg.length; i++){
s += '<tr><td>' + msg[i].id + '</td><td>'+
msg[i].s_name + '</td><td>' + msg[i].s_tel +
'</td><td><a href="javascript:;" onclick="update_stu(' + msg[i].id+ ')">编辑</a>|' +
'<a href="javascript:;" onclick="del_stu(' + msg[i].id + ')">删除</a>' +
'</td></tr>'
}
s += '</table>'
$('#div_stus').html(s)
}, 'json');
});
});
<!-- 方法二：delete请求 -->
function del_stu(id) {
csrf = $('input[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: '/stuapp/student/'+ id + '/',
type: 'delete',
headers: {'X-CSRFToken': csrf},
dataType: 'json',
success: function(msg){
alert('删除成功')
},
error: function (msg) {
alert('删除失败')
}
});
}
<!-- 创建用户更新数据的文本框 -->
function update_stu(id) {
s = '姓名：<input type="text" id="s_name" name="name"><br>' +
'电话：<input type="text" id="s_tel" name="tel"><br>' +
'<input type="button" value="提交" onclick="update(' + id + ')">';
$('#div_update_stu').html(s);
}
<!-- 方法三：patch请求 -->
function update(id) {
csrf = $('input[name=csrfmiddlewaretoken]').val();
s_name = $('#s_name').val();
s_tel = $('#s_tel').val();
$.ajax({
url: '/stuapp/student/' + id + '/',
type: 'patch',
data: {'s_name': s_name, 's_tel': s_tel},
datatype: 'json',
headers: {'X-CSRFToken': csrf},
success: function (msg) {
alert('修改成功')
},
error: function () {
alert('修改失败')
}
})
}
<!-- 创建用户插入新数据的文本框 -->
$(function () {
$('#insertStu').click(function () {
s= '姓名：<input type="text" id="insert_name" name="name"><br>' +
'电话：<input type="text" id="insert_tel" name="tel"><br>' +
'<input type="button" value="提交" onclick="insert()">';
$('#div_insert_stu').html(s);
})
});
<!-- 方法四：post请求 -->
function insert() {
csrf = $('input[name=csrfmiddlewaretoken]').val();
s_name = $('#insert_name').val();
s_tel = $('#insert_tel').val();
$.ajax({
url: '/stuapp/student/',
type: 'post',
data: {'s_name': s_name, 's_tel': s_tel},
datatype: 'json',
headers: {'X-CSRFToken': csrf},
success: function (msg) {
alert('添加成功')
},
error: function (msg) {
alert('添加失败')
}
})
}
</script>
</head>
<body>
{% csrf_token %}
<div>
<input type="button" value="获取所有学生信息" id="showStus">
<input type="button" value="添加学生信息" id="insertStu">
</div>
<div id="div_stus"></div>
<div id="div_update_stu"></div>
<div id="div_insert_stu"></div>
</body>
</html>
1.get请求
页面效果:
点击button获取所有学生信息，执行方法一的函数，获取到所有学生的信息
2.delete请求
点击删除，执行del_stu()函数（方法二），就能够删除对应学生的信息，此处为了提醒用户删除操作成功，做了一个弹框处理。
ajax主要参数：url（接口）、type（请求类型）、success（若请求成功所做的操作，通常是function）、error（若请求错误执行的操作，通常是function）。
值得注意的是，在执行delete、patch、post等请求时，需要获取crsf_token的值，如果没有获取crsf_token，可能会出现403错误。
通常在from表单中也会引入{% csrf_token %}这段代码，当我们submit时，from表单会自动获取crsf_token的值，在ajax中就需要我们自行添加处理，所以如果出现403错误，需要加上下面这部分的内容。
上面这句代码，在浏览器中运行时，浏览器会自动解析这句代码，生成一个隐藏的input，命名为csrfmiddlewaretoken，并随机生成一个值存储在value中，如下：
在ajax之前获取csrf_token中的值，在ajax中指定header。
3.patch请求
点击编辑，执行update_stu()函数，这个函数会在id为div_update_stu中创建用户输入框，提供用户输入修改的内容。
当用户提交数据时，执行update()函数（方法三），修改数据库中的数据。
4.post请求
点击添加学生信息，执行创建用户插入新数据的文本框，当用户提交时，执行insert()函数（方法四），在数据库中添加新的记录。
知识点：
1.ajax请求类型
a.post(select) 提交数据，创建新的记录
b.get(create) 获取数据
c.put(update) 更新全部数据
d.patch(update) 更新局部数据
e.delete(delete) 删除数据
2.ajax参数
a.url 接口
b.type 请求类型
c.data 传入的数据，put、patch、post请求时需要此参数
d.dataType 数据类型，一般都用 JSON
e.headers 指针，指定csrf，取值：{'X-CSRFToken': csrf}
f.success 请求成功后执行的内容，通常用function
g.error 请求失败后执行的内容，通常用function
3.crsf
手动获取csrf_token的值，并在ajax的heardes中添加值
