Django---ajax
Django Ajax
知识点复习：
Python序列化
字符串 = json.dumps(对象) 对象->字符串
对象 = json.loads(字符串) 字符串->对象
JavaScript:
字符串 = JSON.stringify(对象) 对象->字符串
对象 = JSON.parse(字符串) 字符串->对象
应用场景：
数据传输时，
发送：字符串
接收：字符串 -> 对象
知识点扩充：
事件委托
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
如果用的javequery 1或2 版本需要---》 $('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
1.基础功能：发送数据到服务器但不强制用户重新加载他们所在的整个页面
语法：
$.ajax({ #$.ajax({})
url: 'abc', #url:"url地址",
type: 'GET', #type:"发送方式：GET\POST",
data: {'k1':'v1'}, #data:只是字符串或数字,
dataType: 'JSON', #json字符串反序列化
success:function(arg){ #回掉函数 # abc return 的值
# arg是字符串类型
}
})
获取form表单的所有值
var data = $('#fmForm表单的ID').serialize();
$.ajax({
data: $('#fm').serialize()
})
发送数据时：
data中的valve三种情况
a. 只是字符串或数字 $.ajax({ url: 'http//www.baidu.com', type: 'GET', data: {'k1':'v1'}, dataType: 'JSON', success:function(arg){ // arg是对象 } }) b. 包含属组 $.ajax({ url: 'http//www.baidu.com', type: 'GET', data: {'k1':[1,2,3,4]}, dataType: 'JSON', traditional: true, #包含属组发送必须加traditional
success:function(arg){ // arg是对象 } })
c. 包含字典
$.ajax({
url: 'http//www.baidu.com', type: 'GET',
data: {'k1': JSON.stringify({}) }, #json序列化
dataType: 'JSON',
success:function(arg){ // arg是对象 } })
ajax方式发送请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生管理</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <style> .icon { margin:0 5px; } </style> </head> <body> <div class="container"> <div style="padding: 20px 0;"> <a class="btn btn-primary" id="addBtn">添加</a> <a class="btn btn-danger">删除</a> </div> <div> <table class="table table-bordered table-striped"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>班级</th> <th>操作</th> </tr> </thead> <tbody id="tb"> {% for row in stu_list %} <tr nid="{{ row.id }}"> <td na="nid">{{ row.id }}</td> <td na="stdname">{{ row.stdname}}</td> <td na="stdage">{{ row.stdage }}</td> <td na="stdgender">{{ row.stdgender }}</td> <td na="eidt_cls" cid="{{ row.cls.id}}">{{ row.cls.classname}}</td> <td> <a class="glyphicon glyphicon-remove icon del-row"></a> <a class="fa fa-pencil-square-o icon edit-row"></a> </td> </tr> {% endfor %} </tbody> </table> <ul class="pagination pagination-sm"> {{ page_obj.page_str|safe }} </ul> <div style="height: 300px;"></div> </div> </div> <!-- Modal --> {#添加学生#} <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">添加学生</h4> </div> {# #from表单#} <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="username" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username" name="username" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" name="age" placeholder="年龄"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" value="0"> 女 </label> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="cls_id" > {% for row in class_list %} <option value="{{ row.id }}">{{ row.classname }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span id="errorrMsg" style="color:red;"></span> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btnSave">保存</button> </div> </div> </div> </div> {#删除学生#} <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="alert alert-danger" role="alert"> <h4>删除学生信息</h4> <div>...<input style="display: none;" type="text" id="delNid"/></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button id="delConfirm" type="button" class="btn btn-primary">确定</button> </div> </div> </div> </div> {##} {#编辑学生#} <div class="modal fade" id="eidtModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title " id="myModalLabel" >修改学生</h4> </div> {# #from表单#} <div class="modal-body"> <form class="form-horizontal"> <input type="text" class="form-control" style="display: none" name="nid" > <div class="form-group"> <label for="stdname" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="eidtname" name="stdname" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="stdage" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" name="stdage" placeholder="年龄"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="stdgender" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="stdgender" value="0"> 女 </label> </div> </div> <div class="form-group"> <label for="" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="eidt_cls" > {% for row in class_list %} <option value="{{ row.id }}">{{ row.classname }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span id="errorrMsg" style="color:red;"></span> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" id="btneidt">保存</button> </div> </div> </div> </div> <script src="/static/js/jquery-3.1.1.js"></script> <script src="/static/plugins/bootstrap/js/bootstrap.js"></script> <script> {# #页面加载完毕后执行下面的函数#} $(function () { bindEvent(); bindSave(); bindDel(); bindDelConfirm(); bindEidt(); bindEidtConfirm(); }); function bindEidt() { $("#tb").on('click','.edit-row',function () { $('#eidtModal').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') $('#eidtModal select[name="eidt_cls"]').val(cid)} else if(n=='stdgender'){if(v=="True"){$('#eidtModal :radio[value="1"]').prop('checked',true)} else {$('#eidtModal :radio[value="0"]').prop('checked',true);}} else{$('#eidtModal input[name="'+n+'"]').val(v)} }) } )} function bindEidtConfirm() { $('#btneidt').click(function () { var postData = {}; $('#eidtModal').find('input,select').each(function () { var v = $(this).val(); var n = $(this).attr("name"); if (n == 'stdgender') { if ($(this).prop('checked')) { postData[n] = v; } } else { postData[n] = v; } }); $.ajax({ url: "/eidtstudent", type: 'POST', data: postData, dataType: 'JSON', success: function (arg) { if (arg.status) {window.location.reload();} else {alert(arg.message);} } }) }) } function bindDel() { $('#tb').on('click','.del-row',function () { $("#delModal").modal('show'); var nid=$(this).parent().parent().attr('nid'); var n=$('#delNid').val(nid); }) } function bindDelConfirm() { $('#delConfirm').click(function () { var nid=$('#delNid').val(); $.ajax( { url: '/delstudent', type: "GET", data: {'nid': nid}, success: function (arg) { var dict = JSON.parse(arg); if (dict.status) { $('tr[nid="' + nid + '"]').remove() } $("#delModal").modal('hide') } } ) }) } function bindEvent() { $('#addBtn').click(function () { $('#addModal').modal('show') }) } function bindSave() { $('#btnSave').click(function () { var postData = {}; $('#addModal').find('input,select').each(function () { var v = $(this).val(); var n = $(this).attr("name"); if(n=='gender'){ if($(this).prop('checked')){ postData[n] = v; } }else{ postData[n] = v; } }); console.log(postData); $.ajax({ url:'/addstudent/', type:'POST', data:postData, success:function (arg) { // arg是字符串 // JSON.parse将字符串转换成字典， json.loads var dict=JSON.parse(arg); if (dict.status){ {# window.location.reload();#} createRow(postData,dict.data); $('#addModal').modal('hide'); }else {$('#errorrMsg').text(dict.message);}} }) }); } function createRow(postData,nid) { var tr=document.createElement('tr'); $(tr).attr('nid',nid) var tdid=document.createElement('td'); tdid.innerHTML=nid; $(tr).append(tdid) var tdusername=document.createElement('td') tdusername.innerHTML=postData.username; $(tr).append(tdusername); var tdage=document.createElement('td'); tdage.innerHTML=postData.age; $(tr).append(tdage); var tdgender = document.createElement('td'); if(postData.gender=='0'){ tdgender.innerHTML='False'; }else{ tdgender.innerHTML='True'; } $(tr).append(tdgender); var tdcls=document.createElement('td'); var text1=$('select[name="cls_id"]').find('option[value="'+postData.cls_id+'"]').text(); tdcls.innerHTML=text1; $(tr).append(tdcls); var tdhandle='<td><a class="glyphicon glyphicon-remove icon del-row"></a><a class="fa fa-pencil-square-o icon edit-row"></a></td>' $(tr).append(tdhandle); $('#tb').append(tr); } </script> </body> </html>
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^student/', views.students), url(r'^addstudent/$', views.addstudent), url(r'^delstudent$', views.delstudent), url(r'^eidtstudent$', views.eidtstudent),
class Pagination(object): def __init__(self,totalCount,currentPage,perPageitemNum=10,maxPageNum=7): self.total_count=totalCount try: v=int(currentPage) if v<=0: v=1 self.current_page = v except Exception as e: self.current_page=1 self.per_page_item_num=perPageitemNum self.max_page_num=maxPageNum def start(self): return ((self.current_page-1)*self.per_page_item_num) def end(self): return (self.current_page*self.per_page_item_num) @property def num_pages(self): a,b=divmod(self.total_count,self.per_page_item_num) if b==0: return a return a+1 def pager_num_range(self): if self.num_pages<self.max_page_num: # 如果总页数小于显示页码数 return range(1,self.num_pages+1) part=int(self.max_page_num/2) # 如果当前页码比总页码数的一半 5 if self.current_page<part: return range(1,self.max_page_num) if(self.current_page+part)>self.num_pages: return range(self.current_page ,self.current_page+part+1) return range(self.current_page) def page_str(self): page_list = [] first = "<li><a href='/student?p=1'>首页</a></li>" page_list.append(first) if self.current_page == 1: prev = "<li><a href='#'>上一页</a></li>" else: prev = "<li><a href='/teachers/?p=%s'>上一页</a></li>" % (self.current_page - 1) page_list.append(prev) for i in self.pager_num_range(): if i == self.current_page: temp = "<li class='active'><a href='/student/?p=%s'>%s</a></li>" % (i, i) else: temp = "<li><a href='/teachers/?p=%s'>%s</a></li>" % (i, i) page_list.append(temp) if self.current_page == self.num_pages: nex = "<li><a href='#'>下一页</a></li>" else: nex = "<li><a href='/teachers/?p=%s'>下一页</a></li>" % (self.current_page + 1,) page_list.append(nex) last = "<li><a href='/teachers/?p=%s'>尾页</a></li>" % (self.num_pages,) page_list.append(last) return ''.join(page_list)
from django.shortcuts import render,HttpResponse import json from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger # Create your views here. from app01 import models from app01 import paper from app01.paper import Pagination def students(request): stu_list1=models.Students.objects.all() class_list=models.Classes.objects.all() current_page = current_page=request.GET.get('p') if not current_page: current_page='1' page_obj=Pagination(len(stu_list1),current_page) stu_list=stu_list1[page_obj.start():page_obj.end()] return render(request,'student.html',{'stu_list':stu_list,'class_list':class_list,'page_obj':page_obj}) def addstudent(request): response={"status":True,'message':None} try: u=request.POST.get("username") a=request.POST.get("age") g=request.POST.get("gender") c_id=request.POST.get("cls_id") print(u,a,g,c_id) obj=models.Students.objects.create(stdname=u,stdage=a,stdgender=g,cls_id=c_id) response['data'] = obj.id except Exception as e : response['status']=False response['message']='用户输入错误' result = json.dumps(response,ensure_ascii=False) return HttpResponse(result) def delstudent(request): response = {"status": True, 'message': None} nid=request.GET.get('nid') print(666666666666666666666666666666666666666666666666666666666666666666666,nid) try: models.Students.objects.filter(id=nid).delete() except Exception as e: response['status']=False return HttpResponse(json.dumps(response)) def eidtstudent(request): response = {"status": True, 'message': None} try: nid = request.POST.get('nid') u = request.POST.get('stdname') a = request.POST.get('stdage') g = request.POST.get('stdgender') c = request.POST.get('eidt_cls') models.Students.objects.filter(id=nid).update(stdname=u,stdage=a,stdgender=g,cls_id=c) except Exception as e: response['status'] = False response['message'] = str(e) return HttpResponse(json.dumps(response))
浙公网安备 33010602011771号