二十一. Django----ajax全部
https://www.cnblogs.com/yuanchenqi/articles/7638956.html
https://download.csdn.net/download/baobao267/10722491 Django之Form表单验证及Ajax验证方式汇总
一. ajax--所有
<!DOCTYPE html> <html> <head> {%load staticfiles%} <meta charset="UTF-8"> <title>form组件</title> <!-- <script type="text/javascript" src="/static/webpage/js/jquery1.js" ></script> --> <!-- 引用静态的方式--> <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}" ></script> <style type="text/css"> .btn{ display: inline-block; padding: 5px,10px; background-color:coral; color: blue; } </style> </head> <body> <!-- <form method="post" action="/myapp/upload/" enctype="multipart/form-data" method="POST">{%csrf_token%}</form> --> <h1>ajax深入全套学习！！！</h1> <h3>ajax_GET请求</h3> <div> <p> <a href="#" class="btn" onclick="AjaxSubmit1()">ajax_JQuery GET点我</a></p> <p> <a href="#" class="btn" onclick="AjaxSubmit2()">ajax_原生GET 点我</a> </p> </div> <br/> <h3>ajax_POST请求</h3> <div> <!-- {%csrf_token%} --> <p> <a href="#" class="btn" onclick="AjaxSubmit3()">ajax_JQuery POST点我</a></p> <p> <a href="#" class="btn" onclick="AjaxSubmit4()">ajax_原生GET POST</a> </p> </div> <br/> <div> <h3>学习iframe伪ajax!!</h3> <p><input id="url" placeholder="请输入url"/> </p> <p><a onclick="Test();">查看</a> </p> <p><iframe src="http://www.baidu.com" style="height:800px; width:600px" id="iframe"></iframe> </p> </div> <br/> <h3>基于iframe +Form // 学习iframe伪ajax!!</h3> <iframe id="iframe" name="ifra"></iframe> <form action="/myapp/ajax_1/" method="POST" id="fm" target="ifra"> <input name="root" value="11111"> <input type="submit" value="提交了ifram"> </form> <script> // 学习iframe伪ajax!! function Test(){ var url=$("#url").val(); $("#iframe").attr("src",url); } // function AjaxSubmit5(){ // document.getElementById("fm").submit(); // } // jquery 的ajax GET function AjaxSubmit1() { $.ajax({ url:"/myapp/ajax_1", type:"GET", data:{"a":123}, success:function (arg){ console.log(arg); } }); }; // 原生ajax GET function AjaxSubmit2() { var xhr= new XMLHttpRequest(); xhr.onreadystatechange=function (){ if( xhr.readyState==4){ // 接收服务器返回的数据 if(xhr.status==200){ console.log(xhr.responseText); }else{ console.log('ajax同步请求失败'); } } }; xhr.open("GET","/myapp/ajax_1?b=123456"); xhr.send(null) }
// jquery 的ajax POST function AjaxSubmit3() { $.ajax({ url:"/myapp/ajax_1", type:"POST", data:{"a":123}, success:function (arg){ console.log(arg); } }); };
// 原生ajax POST function AjaxSubmit4(){ var xhr= new XMLHttpRequest(); xhr.onreadystatechange=function (){ if( xhr.readyState==4){ // 接收服务器返回的数据 if(xhr.status==200){ console.log(xhr.responseText); }else{ console.log('ajax同步请求失败'); } } }; xhr.open("POST","/myapp/ajax_1"); //设置请求头信息一般没有什么用但是对post有用 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send("d=7777777"); } </script> </body> </html>
from django.shortcuts import render,HttpResponse,redirect # from .models import UserInfo from myapp import models # 启动服务器 # D:\04learnpython\01Web_Djang\webpython>python manage.py runserver import os from django.conf import settings from django import forms from django.forms import fields # 显示页面 def index_ajax(request): return render(request,"html_app/01index_ajax.html") # jquery-AJAX def ajax_1(request): print(request.GET) print(request.POST) print(request.body) return HttpResponse("OK")
from django.conf.urls import url,include from django.contrib import admin from .import views urlpatterns = [ # 上传 url(r'^index_ajax/',views.index_ajax), url(r'^ajax_1/',views.ajax_1), ]
2. 上传相关的
<!DOCTYPE html> <html> <head> {%load staticfiles%} <meta charset="UTF-8"> <title>ajax上传文件 + jquery上传 + 原生ajax上传 + iframe的form上传</title> <!-- <script type="text/javascript" src="/static/webpage/js/jquery1.js" ></script> --> <!-- 引用静态的方式--> <script type="text/javascript" src="{%static 'webpage/js/jquery1.js'%}" ></script> <style type="text/css"> </style> </head> <body> <h1>ajax上传文件 + jquery上传 + 原生ajax上传 + iframe的form上传</h1> <div> <h3>通过jquery上传文件！！！</h3> <h3> 通过data=new FormData() 上传文件 兼任性不好</h3> <input type="file" id="img" /> <!-- <a class="btn" onclick="AjaxSubmit1();">上传</a> --> <button class="btn" onclick="AjaxSubmit1();">上传ajax的jquery</button> <button class="btn" onclick="AjaxSubmit2();">上传ajax原生</button> </div> <br/> <br/> <br/> <div> <h3>通过iframe上传文件！！！ 兼任性最好</h3> <h3> 通过iframe+form上传文件</h3> <iframe id="iframel" name="ifral" style="display: none;"></iframe> <form id="fml" action="/myapp/ajax_1/" method="POST" target="ifral" enctype="multipart/form-data"> <input type="text" name="k1"> <!-- <input type="text" name="k2"> --> <input type="file" name="k3"> <button class="btn" onclick="AjaxSubmit3();">iframe上传文件</button> </form> </div> <script> // jquery上传 function AjaxSubmit1() { var data=new FormData(); // js 的创建对象 用这个上传必须用两个参数 processData:false, contentType:false data.append("k1","v1"); data.append("k2","v2"); data.append("k3",document.getElementById("img").files[0]); $.ajax({ url:"/myapp/ajax_1/", type:"POST", data:data, success:function (arg){ console.log(arg) }, processData:false, contentType:false }) } // 原生ajax Post function AjaxSubmit2() { var data=new FormData(); // js 的创建对象 用这个上传必须用两个参数 processData:false, contentType:false data.append("k1","v1"); data.append("k2","v2"); data.append("k3",document.getElementById("img").files[0]); var xhr= new XMLHttpRequest(); xhr.onreadystatechange=function (){ if( xhr.readyState==4){ // 接收服务器返回的数据 if(xhr.status==200){ console.log(xhr.responseText); }else{ console.log('ajax同步请求失败'); } } }; xhr.open("POST","/myapp/ajax_1/"); xhr.send(data) } // 通过iframe+form上传文件 function AjaxSubmit3() { document.getElementById("iframel").onload=rel; document.getElementById("fml").submit(); } function rel(){ var content=this.contentWindow.document.body.innerHTML; var obj=JSON.parse(content); console.log(obj); } </script> </body> </html>
from django.shortcuts import render,HttpResponse,redirect # from .models import UserInfo from myapp import models # 启动服务器 # D:\04learnpython\01Web_Djang\webpython>python manage.py runserver import os from django.conf import settings from django import forms from django.forms import fields import json # 显示页面 def index_ajax(request): return render(request,"html_app/01index_ajax.html") # jquery-AJAX def ajax_1(request): ret={"status":True,"message":"啦啦啦啦啦啦"} print(request.FILES) print(request.POST) return HttpResponse(json.dumps(ret)) # return HttpResponse("OK") def upload_ajax(request): return render(request,"html_app/02upload_ajax.html")
