>>>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>1.Ajax GET请求</p>
username = <input type="text">
password = <input type="text">
<input type="button" value="Ajax提交" onclick="AjaxGET()" >
<input type="button" value="XmlAjax提交" onclick="XmlAjaxGET()">
</div>
<div>
<p>2.Ajax POST请求</p>
username = <input type="text">
password = <input type="text">
<input type="button" value="Ajax提交" onclick="AjaxPOST()" >
<input type="button" value="XmlAjax提交" onclick="XmlAjaxPOST()">
</div>
<div>
<p>3.iframe请求</p>
<p>基于iframe+form表单</p>
<iframe id="iframe" name="ifra" frameborder="1"></iframe>
<form action="/ajax/" method="POST" id="fm" target="ifra">
<input type="text" name="root" value="1111">
<a onclick="AjaxSubmit()">提交</a>
</form>
</div>
<div>
<div>
<input id="url" type="text" placeholder="请输入url"><a onclick="test()">查看</a>
</div>
<iframe id="iframe11" style="width: 600px;height: 300px" src="http://baidu.com.cn" frameborder="0"></iframe>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
function AjaxSubmit() {
document.getElementById('iframe').onload = reload;
document.getElementById('fm').submit()
}
function reload() {
{#console.log(self);#}
{#console.log(self.contentWindow.document.body.innerHTML);#}
{#console.log($(self).contents().find('body').html())#}
{#var content = $("#iframe").contents().find('body').html();#}
var content = this.contentWindow.document.body.innerHTML;
var obj =JSON.parse(content);
if(obj.status){
alert(obj.message);
}
}
function test() {
var url =$("#url").val();
$("#iframe11").attr('src',url)
}
function AjaxGET() {
$.ajax({
url:'/ajax/',
type:'GET',
data:{key:'ajaxget请求'},
success:function (args) {
}
})
}
function XmlAjaxGET() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
};
xhr.open('GET','/ajax/?p=xmlget请求');
xhr.send(null);
}
function AjaxPOST() {
$.ajax({
url:'/ajax/',
type:'POST',
data:{key:'ajaxpost请求'},
success:function (args) {
}
})
}
function XmlAjaxPOST() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
};
xhr.open('POST','/ajax/');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send('p=123');
}
</script>
</body>
</html>
>>>views
def index(request):
return render(request,'index.html',locals())
def ajax(request):
print(request.POST)
print(request.GET)
print(request.body)
ret = {'status':True,'message':'....'}
import json
return HttpResponse(json.dumps(ret))
