Form使用AJax提交
from django.core.exceptions import ValidationError class AjaxForm(forms.Form): username = fields.CharField() user_id = fields.IntegerField( widget=widgets.Select(choices=[(1,'zhangyang'),(2,"yangfan"),]) ) def clean_username(self): v=self.cleaned_data['username'] if models.UserInfo.objects.filter(username=v).count(): #整体错了，详细的错误信息 raise ValidationError("用户名已存在") else: return v def clean(self): value_dict=self.cleaned_data v1=value_dict.get("username") v2=value_dict.get("user_id") if v1 == "root" and v2==1: raise ValidationError("整体错误信息") return self.cleaned_data def ajax(request): if request.method=="GET": obj=AjaxForm()#没有做验证，只显示HTML标签 return render(request,"ajax.html",{'obj':obj}) else: obj=AjaxForm(request.POST)#也没有做验证 if obj.is_valid():#做验证 print(obj.cleaned_data) return JsonResponse({'status':200,'msg':'success'}) else: print(obj.errors) return JsonResponse({'status':201,'msg':obj.errors})
<form action="" id="fm"> <div class='errors'></div> {% for item in obj_list %} <div>{{item}}{{item.errors.0}}</div> {% endfor%} <input type="button" value="提交"id="ajax_sub"> </form> <script> $("#ajax_sub").click(function () { $.ajax({ url:'/ajax/', type:"post", data:$("#fm").serialize(), dataType:'json', success:function (arg) { console.log(arg); $(".errors").text(arg.non_field_errors) } }) })
as_p、as_ul、as_table后台通过form在前端的input相关标签展示
clean验证的，前端拿到error：non_field_errors
小项目：实现增删改查，用AJax实现
<!DOCTYPE html> {% load static %} <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="{% static 'js/jquery-3.3.1.js' %}"></script> <script src="{% static 'plugin/bootstrap.3.0.0/content/Scripts/bootstrap.min.js' %}"></script> <link rel="stylesheet" href="{% static 'plugin/bootstrap.3.0.0/content/Content/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}"> <style> .a-margin{ margin: 0 5px; } </style> </head> <body> <div> <select name="" id="sel" multiple> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="button" value="btn" onclick="testAjax();"> </div> <div class="container"> <div style="padding: 20px 0;"> <input type="button" value="添加" class="btn btn-primary" onclick="addStudent();"> <input type="button" class="btn btn-danger" value="删除"> </div> <div> <table class="table table-hover table-striped"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>班级</th> <th>操作</th> </tr> </thead> <tbody id="tb"> {% for stu in stu_list %} <tr nid="{{ stu.id }}"> <td na="pid">{{ stu.id }}</td> <td na="username">{{ stu.name }}</td> <td na="age">{{ stu.age }}</td> <td na="gender">{{ stu.gender }}</td> <td na="csname" cid="{{ stu.cs_id }}">{{ stu.cs.name }}</td> <td> <a class="fa fa-remove fa-2x del-row a-margin"></a> <a class="fa fa-pencil-square-o fa-2x edit-row a-margin"></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 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" id="age" name="age"placeholder="年龄"> </div> </div> <div class="form-group"> <label for="gender" 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="classes" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="cls_id" id="classes"> {% for item in cla_list %} <option value="{{ item.id }}">{{ item.name }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span class="errorMsg" style="color: red"></span> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="btn-save">保存</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> <span class="errorMsg" style="color:red;"></span> <input type="text" id="del_id" style="display: none"/> </div> <div > <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-danger" id="btn-delete">删除</button> </div> </div> </div> </div> <!-- Modal--编辑 --> <div class="modal fade" id="editModal" 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 class="form-horizontal"> <input type="text" class="form-control" id="userid-2"name="pid" style="display: none;"> <div class="form-group"> <label for="username-2" class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" id="username-2"name="username" placeholder="姓名"> </div> </div> <div class="form-group"> <label for="age-2" class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" id="age-2" name="age"placeholder="年龄"> </div> </div> <div class="form-group"> <label for="gender-2" 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="classes-2" class="col-sm-2 control-label">班级</label> <div class="col-sm-10"> <select class="form-control" name="cls_id" id="classes-2"> {% for item in cla_list %} <option value="{{ item.id }}">{{ item.name }}</option> {% endfor %} </select> </div> </div> </form> </div> <div class="modal-footer"> <span class="erroreditMsg" style="color: red"></span> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="btn-edit-save">保存</button> </div> </div> </div> </div>
增加
function addStudent() {
$("#addModal").modal('show');
}
$("#btn-save").on('click',function () {
var postData={};
$("#addModal").find("input,select").each(function () {
console.log($(this)[0])
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:'/addStudents/',
type:'post',
data:postData,
dataType:"json",
success:function (arg) {
if(arg['stats']){
$("#addModal").modal("hide");
{#window.location.reload();#}
createRow(postData,arg['data'])
}
else {
$(".errorMsg").html(arg["message"]);
}
},
});
});
function createRow(postData,id) {
var tr=document.createElement("tr");
$(tr).attr("nid",id);
var tdId=document.createElement("td");
$(tdId).attr("na","id");
tdId.innerHTML=id;
$(tr).append(tdId);
var tdUser=document.createElement("td");
$(tdUser).attr("na","username")
tdUser.innerHTML=postData["username"];
$(tr).append(tdUser);
var tdAge=document.createElement("td");
$(tdAge).attr("na","age")
tdAge.innerHTML=postData["age"];
$(tr).append(tdAge);
var tdGender=document.createElement("td");
$(tdGender).attr("na","gender");
if (postData["gender"]==0){
tdGender.innerHTML="False"
}
else {
tdGender.innerHTML="True"
}
$(tr).append(tdGender);
var tdCs=document.createElement("td");
$(tdCs).attr("na","csname");
$(tdCs).attr("cid",postData['cls_id']);
var text=$("#addModal select[name='cls_id']").find("option[value='"+postData["cls_id"]+"']").text();
tdCs.innerHTML=text;
$(tr).append(tdCs);
var tdHandle='<td><a class="fa fa-remove fa-2x del-row"></a><a class="fa fa-pencil-square-o fa-2x edit-row"></a></td>';
$(tr).append(tdHandle);
$("#tb").append($(tr));
$("#tb tr[nid='"+id+"']").find("a").addClass("a-margin");
}
事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定 // click事件； [selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的绑定方式和 //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个 //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加 //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
删除
$("#tb").on('click','.del-row',function () {
$("#delModal").modal("show");
var rowid=$(this).parent().parent().attr("nid");
$("#del_id").val(rowid);
});
$("#btn-delete").click(function () {
var nid=$("#del_id").val();
$.ajax({
url:'/delStudents',
type:'get',
data:{nid:nid},
dataType: "json",
success:function (arg) {
if(!arg["status"]){
$(".errorMsg").html(arg["message"]);
}
else {
$("#tb").find("tr[nid='"+nid+"']").remove();
$("#delModal").modal('hide');
}
}
});
});
修改
$("#tb").on('click','.edit-row',function () {
$("#editModal").modal("show");
$(this).parent().prevAll().each(function () {
var n=$(this).attr('na');
var t=$(this).text();
if(n=="csname"){
var cid=$(this).attr("cid");
$("#editModal select[name='cls_id']").val(cid);
}else if(n=="gender"){
if(t=="True"){
$("#editModal :radio[value='1']").prop("checked",true);
}else {
$("#editModal :radio[value='0']").prop("checked",true);
}
}else {
$("#editModal input[name='"+n+"']").val(t);
}
});
});
$("#btn-edit-save").click(function () {
var edit_post_data={};
$("#editModal").find("select,input").each(function () {
var n=$(this).attr('name');
var t=$(this).val();
if (n=="gender"){
if($(this).prop("checked")){
edit_post_data[n]=t;
}
}else {
edit_post_data[n]=t;
}
});
console.log("post",edit_post_data);
$.ajax({
url:"/editStudents/",
type:"post",
data:edit_post_data,
dataType:"json",
success:function (arg) {
if(arg.status==200){
editRow(edit_post_data);
$("#editModal").modal("hide");
}else {
$(".erroreditMsg").text(arg.message);
}
}
});
});
function editRow(postData) {
$("#tb").find("tr[nid='"+postData["pid"]+"']").children().each(function () {
var n=$(this).attr("na");
if(n=="csname"){
$(this).attr("cid",postData["cls_id"]);
var text=$("#editModal select[name='cls_id']").find("option[value='"+postData["cls_id"]+"']").text();
$(this).text(text);
}else if(n=="gender"){
if(postData["gender"]==1){
$(this).text("True");
}else {
$(this).text("False");
}
}else {
$(this).text(postData[n]);
}
});
}
相关数据库
from django.db import models
# Create your models here.
class Classes(models.Model):
"""
班级表
"""
name=models.CharField(max_length=32)
m=models.ManyToManyField("Teachers")
class Teachers(models.Model):
"""
老师表
"""
name=models.CharField(max_length=32)
class Students(models.Model):
name=models.CharField(max_length=32)
age=models.IntegerField()
gender=models.NullBooleanField()
cs=models.ForeignKey("Classes",related_name="s",on_delete=models.CASCADE)
from django.shortcuts import redirect,render,HttpResponse
from django.http import JsonResponse
from app01 import models
import json
def students(request):
stu_list=models.Students.objects.all()
cla_list=models.Classes.objects.all()
return render(request,'students.html',locals())
def addStudents(request):
res={'stats':True,'message':"success",'data':None}
u=request.POST.get("username")
a=request.POST.get("age")
g=request.POST.get("gender")
cls_id=request.POST.get("cls_id")
try :
obj=models.Students.objects.create(name=u,age=a,gender=g,cs_id=cls_id)
res['data']=obj.id
except Exception as e:
res['stats'] = False
res['message'] = "用户输入错误"
# return HttpResponse(json.dumps(res,ensure_ascii=False))
return JsonResponse(res)
def delStudents(request):
nid=request.GET.get("nid")
ret={'status':True,"message":"success"}
try :
models.Students.objects.filter(id=nid).delete();
except Exception as e:
ret["status"]=False
ret["message"]="删除信息出错"
return JsonResponse(ret)
def editStudents(request):
if request.method=="POST":
res={'status':200,"message":"success"}
pid=request.POST.get('pid')
user=request.POST.get('username')
age=request.POST.get('age')
gender=request.POST.get("gender")
cs_id=request.POST.get('cls_id')
print("gender",gender)
try:
models.Students.objects.filter(id=pid).update(name=user,age=age,gender=gender,cs_id=cs_id)
except Exception as e:
res['status']=205
res['message']="输入错误"
return JsonResponse(res)
浙公网安备 33010602011771号