html中ajax增删改查,Django中ajax的增删改查访问

Django中ajax的增删改查访问

这里在Django中我们建好模型，通过ajax取渲染页面。

这里给到一个页面show.html

展示所有学生信息

#添加学生

#展示所有学生信息

#更新学生数据

#删除学生数据

页面中有一个获取所有学生信息按钮，一个添加学生信息按钮，前面我们展示了所有的学生信息，这里我们用前端给他进行渲染。

后台那边代码为：

def showStu(request):

if request.method == 'GET':

data= Student.objects.all()

result ={

'result':data

}

return render(request,'show.html',result)

我们将js写在header标签中

$(function () {

$('#showStu').click(function () {

#访问/stu/student/ 返回所有学生信息

$.get('/stu/showStu/', function (msg) {

#给显示的页面加上简单的样式

s = '

ID

姓名

地址

操作

for (var i = 0; i < msg.length; i += 1) {

s += '

' + msg[i].id + '\' + msg[i].s_name + '\' + msg[i].s_tel + '\

#进行当前数据的修改

编辑 |\

#进行当前数据的删除

删除

'

}

s += '

';

$('#div_stus').html(s)

}, 'json');

});

});

删除,当删除时，需要传入你需要删除数据的ID，才能确定你删除的是那一条数据。

function del_stu(i) {

csrf = $('input[name="csrfmiddlewaretoken"]').val();

$.ajax({

url:'/stu/showStu/' + i + '/',

type:'DELETE',

headers :{'X-CSRFToken':csrf},

dataType:'json',

success:function () {

alert('删除成功')

},

error:function () {

alert('删除失败')

}

});

}

方式为delete,显示删除成功，代表成功地删除了数据。

更新，与删除一致，需要传入ID，才能确定你需要传入的是那一条数据。而在添加数据时，也要有相应的输入页面。这里输入页面代码如下：

function update_stu(i) {

s='姓名：\

电话：\

';

#将编辑信息页面样式进行保存

$('#div_update_stus').html(s)

}

更新的ajax如下所示：

function update(i) {

csrf = $('input[name="csrfmiddlewaretoken"]').val();

s_name = $('#s_name').val();

s_tel = $('#s_tel').val();

$.ajax({

url:'/stu/showStu/' + i + '/',

type:'PATCH',

{#headers :{'X-CSRFToken':csrf},#}

dataType:'json',

data:{'s_name':s_name,'s_tel':'s_tel'},

success:function (msg) {

alert('修改成功')

},

error:function (msg) {

alert('修改失败')

}

});

}

更新部分信息用PATCH，这里我们获取到前面编辑页面所输入的信息s_name，s_tel的值，将其传入后端的student路径，即StudentsEdit方法。让数据进行更新，再点击获取所有学生信息，就会看到相对应ID的学生信息有所改变。

添加数据。与更新一样，需要添加数据的页面。因为是创造数据,所以不用传入任何ID。

function add_Stu() {

s='姓名：\

电话：\

';

$('#div_add_stus').html(s)

}

添加的ajax如下所示：

function add() {

csrf = $('input[name="csrfmiddlewaretoken"]').val();

s_name = $('#s_name').val();

s_tel = $('#s_tel').val();

$.ajax({

url:'/stu/showStu/',

type:'POST',

{#headers :{'X-CSRFToken':csrf},#}

dataType:'json',

data:{'s_name':s_name,'s_tel':'s_tel'},

success:function (msg) {

alert('添加成功')

},

error:function (msg) {

alert('添加失败')

}

});

}

方式为POST，这里我们获取到前面编辑页面所输入的信息s_name，s_tel的值，将其传入后端。让后端进行显示