分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

1.4 博客系统| 基于Ajax提交数据

发布时间:2023-09-06 02:07责任编辑:沈小雨关键词:Ajax

基于Ajax提交formdata数据

失败的时候的错误信息(什么都不输入直接提交)

 基于Ajax在注册页面显示错误信息

 register.html

//基于Ajax提交数据 ???$(".reg_btn").click(function () { ???????console.log($("#form").serializeArray()); ???????var formdata = new FormData(); ??//对下面注释的内容进行优化版 ???????var request_data = $("#form").serializeArray(); ???????$.each(request_data, function (index, data) { ???????????formdata.append(data.name,data.value) ???????}); ???????formdata.append("avatar", $("#avatar")[0].files[0]);{# ???????var formdata = new FormData(); ??//Ajax上传文件一定要换成FormData的格式,构建一个对象传到这里边#}{# ???????formdata.append("user",$("#id_user").val()); //传过去的键和值#}{# ???????formdata.append("pwd",$("#id_pwd").val());#}{# ???????formdata.append("re_pwd",$("#id_re_pwd").val());#}{# ???????formdata.append("email", $("#id_email").val());#}{# ???????formdata.append("avatar", $("#avatar")[0].files[0]);#}{# ???????formdata.append("csrfmiddlewaretoken", $("[name = ‘csrfmiddlewaretoken‘]").val());#} ???????$.ajax({ ???????????url:"", ???????????type:"post", ???????????contentType:false, ?//要加两个参数不然会报错;数据的编码类型 ???????????processData:false, //只要是formdata都要加这两个参数 ???????????data: formdata, ???????????success: function (data) { ???????????????console.log(data); ???????????????if(data.user){ ???????????????????//注册成功 ???????????????} ???????????????else{//注册失败 ???????????????????//console.log(data.msg) ???????????????????$("span.error").html(""); //清空错误信息 ???????????????????$(".form-group").removeClass("has-error"); ???????????????????//展示此次提交的错误信息 ???????????????????$.each(data.msg, function(field, error_list){ ???????????????????????console.log(field, error_list); ???????????????????????$("#id_"+field).next().html(error_list[0]); ?//每次循环都把各自的信息放到input那下面了 ???????????????????????$("#id_"+field).parent().addClass("has-error"); ???????????????????}) ???????????????} ???????????} ???????}) ???})

views.py

def register(request): ???if request.is_ajax(): ?#你点击那个按钮即使Ajax请求又是post请求。既可以用Ajax也可用method=post作分支判断 ???????print(request.POST) #把所有提交的数据都取出来 ???????form = UserForm(request.POST) ?#用UserForm做检验, ???????response = {"user":None, "msg":None} #发Ajax一般都会返回一个字典来进行标示这些行为 ???????if form.is_valid(): ?#数据全通过,成功 ???????????response["user"] = form.cleaned_data.get("user") #注册人的名字 ???????else: ???????????print(form.cleaned_data) ?#干净数据 ???????????print(form.errors) ???????#错误数据 ???????????response["msg"] = form.errors ?#失败了之后把这所有的错误信息放到msg里边 ???????return JsonResponse(response) ???form = UserForm() ???return render(request,"register.html", {"form":form})

1.4 博客系统| 基于Ajax提交数据

原文地址:https://www.cnblogs.com/shengyang17/p/9357493.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved