django ajax增 删 改 查
具于django ajax实现增 删 改 查功能
代码示例：
代码：
urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^students/', views.students),
url(r'^add_student/', views.add_student),
url(r'^del_student/', views.del_student),
url(r'^edit_student/', views.edit_student),
url(r'^test_ajax_list/', views.test_ajax_list),
]
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'static'),
)
models.py
from django.db import models
from django.db import models class Classes(models.Model):
"""
班级表,男
"""
title = models.CharField(max_length=32)
m = models.ManyToManyField("Teachers") class Teachers(models.Model):
"""
老师表，女
"""
name = models.CharField (max_length=32) class Student(models.Model):
username = models.CharField(max_length=32)
age = models.IntegerField()
gender = models.BooleanField()
cs = models.ForeignKey(Classes)
添加功能：
编辑功能：
views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
from app01 import models
import json
def students(request):
cls_list = models.Classes.objects.all()
stu_list = models.Student.objects.all() return render(request,'students.html',{'stu_list':stu_list,'cls_list':cls_list}) def add_student(request):
response = {'status':True,'message': None,'data':None}
try:
u = request.POST.get('username')
a = request.POST.get('age')
g = request.POST.get('gender')
c = request.POST.get('cls_id')
obj = models.Student.objects.create(
username=u,
age=a,
gender=g,
cs_id=c
)
response['data'] = obj.id
except Exception as e:
response['status'] = False
response['message'] = '用户输入错误' result = json.dumps(response,ensure_ascii=False)
return HttpResponse(result) 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)) def edit_student(request):
response = {'code':1000, 'message': None}
try:
nid = request.POST.get('nid')
user = request.POST.get('user')
age = request.POST.get('age')
gender = request.POST.get('gender')
cls_id = request.POST.get('cls_id')
models.Student.objects.filter(id=nid).update(
username=user,
age=age,
gender=gender,
cs_id=cls_id
)
except Exception as e:
response['code'] = 1001
response['message'] = str(e)
return HttpResponse(json.dumps(response)) def test_ajax_list(request):
print(request.POST.getlist('k'))
return HttpResponse('...')
students.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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="user">{{ row.username }}</td>
<td na="age">{{ row.age }}</td>
<td na="gender">{{ row.gender }}</td>
<td na="cls_id" cid="{{ row.cs_id }}">{{ row.cs.title }}</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>
</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>
<div class="modal-body"> <form id="fm" 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" 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 for="age" 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="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select> </div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" 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> <!-- Modal -->
<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">
<h3>删除学生信息？</h3>
<div>...<input style="display: none;" type="text" id="delNid" /></div>
<div>
<button type="button" class="btn btn-default">取消</button>
<button id="delConfirm" type="button" class="btn btn-danger">确定</button>
</div>
</div>
</div>
</div> <!-- Modal -->
<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>
<div class="modal-body"> <form id="fm" class="form-horizontal">
<input type="text" name="nid" style="display: none" /> <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" name="user" 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 for="age" 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="age" class="col-sm-2 control-label">班级</label>
<div class="col-sm-10">
<select class="form-control" name="cls_id">
{% for row in cls_list %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endfor %}
</select> </div>
</div>
</form>
</div>
<div class="modal-footer">
<span id="errorMsg" style="color: red;"></span>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="btnEditSave">保存</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();
bindEdit();
bindEditConfirm();
}); /*
编辑提交事件
*/
function bindEditConfirm() {
$('#btnEditSave').click(function () {
var postData = {};
$('#eidtModal').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;
}
}); $.ajax({
url: '/edit_student/',
type: 'POST',
data: postData,
dataType: 'JSON',
success:function (arg) {
if(arg.code == 1000){
window.location.reload();
}else{
alert(arg.message);
}
}
})
})
} /*
绑定编辑按钮点击事件
*/
function bindEdit() {
$('#tb').on('click','.edit-row',function () {
$('#eidtModal').modal('show');
//1.获取当前行的所有数据
// 将数据赋值到对应的对话框的指定位置 $(this).parent().prevAll().each(function () {
// cls_id
var v = $(this).text();
var n = $(this).attr('na');
if(n=='cls_id'){
var cid = $(this).attr('cid');
$('#eidtModal select[name="cls_id"]').val(cid);
}else if(n=='gender'){
// v=True
if(v=='True'){
$('#eidtModal :radio[value="1"]').prop('checked',true);
}else{
$('#eidtModal :radio[value="0"]').prop('checked',true);
}
}else {
// n=age
// v=12
$("#eidtModal input[name='"+ n +"']").val(v) }
}); })
}
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');
}
}) }); }
function bindDel() {
$('#tb').on('click','.del-row',function () {
$('#delModal').modal('show');
// 回去当前行的ID
var rowId = $(this).parent().parent().attr('nid');
$('#delNid').val(rowId);
})
}
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;
}
}); /*
postData = {
username: 'asdf',
age:18,
gender: 1,
cls_id: 2
}
*/ $.ajax({
url: '/add_student/',
type: 'POST',
data: postData,
success:function (arg) {
// arg是字符串
// JSON.parse将字符串转换成字典， json.loads
var dict = JSON.parse(arg);
if(dict.status){
/*
postData = {
username: 'asdf',
age:18,
gender: 1,
cls_id: 2
}
自增id = dict.data
*/
createRow(postData,dict.data);
$('#addModal').modal('hide');
// window.location.reload();
}else {
$('#errorMsg').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 tdUser = document.createElement('td');
tdUser.innerHTML = postData.username;
$(tr).append(tdUser); 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 tdClass = document.createElement('td');
var text = $('select[name="cls_id"]').find('option[value="'+ postData.cls_id +'"]').text();
tdClass.innerHTML = text;
$(tr).append(tdClass); 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>
django ajax增 删 改 查的更多相关文章
- 好用的SQL TVP~~独家赠送[增-删-改-查]的例子
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础] ...
- iOS FMDB的使用(增,删,改,查,sqlite存取图片)
iOS FMDB的使用(增,删,改,查,sqlite存取图片) 在上一篇博客我对sqlite的基本使用进行了详细介绍... 但是在实际开发中原生使用的频率是很少的... 这篇博客我将会较全面的介绍FM ...
- iOS sqlite3 的基本使用(增 删 改 查)
iOS sqlite3 的基本使用(增 删 改 查) 这篇博客不会讲述太多sql语言,目的重在实现sqlite3的一些基本操作. 例:增 删 改 查 如果想了解更多的sql语言可以利用强大的互联网. ...
- ADO.NET 增 删 改 查
ADO.NET:(数据访问技术)就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 ADO.NET所有数据访 ...
- MVC EF 增 删 改 查
using System;using System.Collections.Generic;using System.Linq;using System.Web;//using System.Data ...
- python基础中的四大天王-增-删-改-查
列表-list-[] 输入内存储存容器 发生改变通常直接变化,让我们看看下面列子 增---默认在最后添加 #append()--括号中可以是数字,可以是字符串,可以是元祖,可以是集合,可以是字典 #l ...
- django单表操作 增 删 改 查
一.实现:增.删.改.查 1.获取所有数据显示在页面上 model.Classes.object.all(),拿到数据后,渲染给前端;前端通过for循环的方式,取出数据. 目的:通过classes(班 ...
- Django（十）模型：django模型类对数据库的：增/删/改/查、自关联、管理器、元选项（指定表名）
一.插入.更新和删除 调用一个模型类对象的save方法的时候就可以实现对模型类对应数据表的插入和更新. 调用一个模型类对象的delete方法的时候就可以实现对模型类对应数据表数据的删除. 二.自关联 ...
- django 多对多 增 删 改 查
一.通过url方式实现多对多的:增加,删除,编辑 代码目录: urls.py 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
随机推荐
- oracle 子查询和组合函数
oracle 子查询和组合函数 --查询与"SCOTT"在同一个部门的员工 select empno,ename,deptno from emp where deptno in ( ...
- 转：[译]CSV 注入：被人低估的巨大风险
转:https://yq.aliyun.com/articles/225847 原文地址:The Absurdly Underestimated Dangers of CSV Injection 原文 ...
- 用三个线程循环输出ABC
前两天看Java吧有人求助这个问题.想了想并不是很难.今天就顺手实现了一下. 我自己想到的有两种方法,一个是使用synchronized,一个是使用lock. 一.synchronized packa ...
- 阿里云下Linux服务器安装JDK、Tomcat
阿里云服务器相信大家越来越熟悉,刚开始接触,将基本的java软件安装做点记录: 1.配置阿里云的yum仓库: 获取仓库配置 wget http://mirrors.aliyun.com/repo/Ce ...
- React Native 系列(九)
前言 本系列是基于React Native版本号0.44.3写的.很多的App都使用了Tab标签组件,例如QQ,微信等等,就是切换不同的选项,显示不同的内容.那么这篇文章将介绍RN中的Tab标签组件. ...
- Codeforces 798D
这两天后缀数组整多了整点有意思的,随机算法. 题意给你两个数组,让你求一个排列使得这个排列对应的两个数组前n/2+1个数之和的二倍大于每个序列总和. 下面先贴下这题正解 二维贪心,按a从大到小排,把第 ...
- hdu 3949 XOR 线性基 第k小异或和
题目链接 题意 给定\(n\)个数,对其每一个子集计算异或和,求第\(k\)小的异或和. 思路 先求得线性基. 同上题,转化为求其线性基的子集的第k小异或和. 结论 记\(n\)个数的线性基为向量组\ ...
- 20162304 实验一《Java开发环境的熟悉》实验报告
Linux基础与Java开发环境 实验内容 1.熟悉Linux基础操作: 2.使用JDK编译.运行简单的Java程序: 实验要求 1.学习<Linux基础入门(新版)> 2.完成实验.撰写 ...
- bzoj 3809 莫队
收获: 1.分块时顺便记录每个位置所属的块,然后一次排序就OK了. 2.要权衡在“区间移动”与“查询结果”之间的时间,莫队算法一般区间移动频率远大于查询结果,所以我们选择的辅助数据结构时就要注意了,我 ...
- bzoj4034 树上操作
Description 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中 ...