还是一个简单的html提交页面,ajax提交就不需要form表单了:
1 <p><input id="a" type="text" name="ac"></p> 2 <p><input id="p" type="password" name="pwd"></p> 3 <p><input id="e" type="eMail" name="e"></p> 4 <p><input id="s" type="submit" value="Ajax提交"></p>
因为是ajax提交,所有就不必考虑刷新保留数据等问题,在js中直接发送数据,获取,然后动态添加就可以了:
1 <script> 2 $(function () { 3 handle_submit() 4 }) 5 6 function handle_submit() { 7 $("#s").click(function () { 8 //ajax提交 9 $.ajax({ 10 url:"/fff/Ajax", 11 data:{"user":$("#a").val(),"pwd":$("#p").val(),"eMail":$("#e").val()},//获取input值 12 type:"POST", 13 dataType:"json", 14 success:function (ret) { 15 //返回的ret是这种格式: 16 17 //{"status": false, "error": {"ac": [{"code": "required", "message": "u7528u6237u540du4e0du80fdu4e3au7a7a"}], "pwd": [{"code": "required", "message": "u5bc6u7801u4e0du80fdu4e3au7a7a"}], "eMail": [{"code": "required", "message": "u7528u6237u540du957fu5ea6u4e0du80fdu4e3au7a7a"}]}, "data": "null"} 18 $(".errorMsg").remove()//每次提交之前先把数据span清除 19 if (!ret.status){ 20 //循环处理数据,动态生产成span标签 21 $.each(ret.error,function (k,v) { 22 23 var mes=document.createElement("span") 24 mes.className="errorMsg" 25 mes.innerHTML=v[0].message 26 $("input[name='"+k+"']").after(mes) 27 }) 28 } 29 } 30 }) 31 }) 32 } 33 </script>
后台代码:
1 def Ajax(req): 2 if req.method == "GET": 3 return render(req, "Ajaxsubmit.html") 4 elif req.method == "POST": 5 obj = Formsubmit(req.POST) # 将得到req.POST信息传递给验证类做参数 6 status = obj.is_valid()# 这里执行后才验证,验证的信息都存储在obj这个类中 7 #自定义一个返回的数据类型 8 ret={ 9 "status":True, 10 "error":"null", 11 "data":"null" 12 } 13 if not status: 14 ret["status"]=False 15 error_data=obj.errors.as_data() 16 ret["error"]=error_data 17 return HttpResponse(json.dumps(ret,cls=JsonCustomEncode)) 18 19 from django.core.exceptions import ValidationError 20 #查看ValidationError可知道错误数据中包括错误类型code,错误信息message2项,所以转换json的时候返回return {"code":file.code,"message":file.message} 21 import json 22 class JsonCustomEncode(json.JSONEncoder): 23 def default(self,file): 24 if isinstance(file,ValidationError): 25 return {"code":file.code,"message":file.message} 26 else: 27 return json.JSONEncoder.default(self,file)