一、用原生来写ajax
- 请求GET
function Ajax2() {
//创建对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
console.log((xhr.responseText));
}
}
//获取数据
xhr.open('GET','/ajax?p=123');
xhr.send(null);
};
- 请求POST
function Ajax3() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
//接受服务器返回的数据
console.log(xhr.responseText);
}
}
xhr.open('POST','/ajax/');
//post 请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8')
//post 请求发送参数d
xhr.send("p=456");
}
二、用ifarme来写
用ajax的时候，整体的请求步骤是
1.向指定的url发送请求
2.指定的url 函数处理请求返回处理后
3.ajax接受处理后的请求，来进行下一步的操作
-
先写一个iframe 例子认识iframe
这input的中输入网址，进行跳转，通过这个例子发现，iframe可以帮我们完成1和2步
<h6>ifram</h6>
<input id="url" type="text"> <a href="#" onclick="ifclick()">T</a>
<iframe id="iframe" src="http://www.baidu.com" height="800px" width="800px"></iframe>
<script>
function ifclick() {
var v = $('#url').val();
$('#iframe').attr('src',v)
}
</script>
-
简单例子
用from的target属性和iframe 的name一致创建绑定关系，这样form向后传值，可以用iframe来接受展示
<iframe id="ifram" name="ifra"></iframe>
<form id="fm" action="/ajaxfram/" method="POST" target="ifra">
<input name="root" value="111">
<input type="submit" value="提交">
</form>
views 后台处理form提交的用户输入的值
def ajaxfram(request):
if request.method == "GET":
return render(request, "index.html")
else:
return HttpResponse("ok")
-
升级必备版本，处理后台接受的函数
要想利用iframe，做到在js处理完数据展示，就给用到iframe的onload属性延迟加载，也就是在他等待的时候我们给他写一个处理函数
<iframe id="ifram" name="ifra"></iframe>
<form id="fm" action="/ajaxfram/" method="POST" target="ifra">
<input name="root" value="111">
<a onclick="AjaxSubit()">提交</a>
</form>
- js
js 的思路是当我们点击提交的时候，给iframe 绑定onload属性
function AjaxSubit(){
document.getElementById('ifram').onload = reloadIframe;
document.getElementById('fm').submit();
}
我们用给onload 绑定的函数reloadIframe进行数据处理,注意iframe展示都在body中，所以先从body中获取值
function reloadIframe() {
var concent = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(concent);
if(obj.status){
alert(obj.message)
}
}
views 层
def ajaxfram(request):
if request.method == "GET":
return render(request, "index.html")
else:
import json
ret = {"status":True,"message":"...."}
return HttpResponse(json.dumps(ret))
