ajax实现添加数据

前端部分

function bindBtnAddEvent() {$("#btnAdd").click(function () {$(".error_msg").empty();$.ajax({url: '/task/add/',type: 'post',data: $('#formAdd').serialize(),dataType: "JSON",success: function (res) {if (res.status) {alert("添加成功");location.reload();} else {console.log(res.error);$.each(res.error, function (name, data) {console.log(name);$("#id_" + name).next().text(data[0]);})}}})})}

点击后，发送ajax请求 。以post方式向/task/add/地址发送表单数据。

@csrf_exempt
def task_add(request):#print(request.POST)#校验form=TaskModelForm(data=request.POST)if form.is_valid():form.save()data_dict={"status": True}return HttpResponse(json.dumps(data_dict))print(type(form.errors))data_dict={"status": False,'error':form.errors}return HttpResponse(json.dumps(data_dict))

TaskModelForm是自定义的类 

 后台接收到数据，以TaskModelForm类接收POST请求发送的数据。

如果数据有效，保存到数据库，并给前段返回HttpResponse(json.dumps(data_dict))，其中

data_dict={"status":True}

如果无效，data_dict={"status": False,'error':form.errors} 向前端发送 HttpResponse(json.dumps(data_dict))

success: function (res) {if (res.status) {alert("添加成功");location.reload();} else {console.log(res.error);$.each(res.error, function (name, data) {console.log(name);$("#id_" + name).next().text(data[0]);})}
}

请求发送过后，获取响应。

如果res.status=True，添加成功  并且刷新页面 

否则，