一衩茸、用原生來寫ajax
- 請(qǐng)求GET
function Ajax2() {
//創(chuàng)建對(duì)象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
console.log((xhr.responseText));
}
}
//獲取數(shù)據(jù)
xhr.open('GET','/ajax?p=123');
xhr.send(null);
};
- 請(qǐng)求POST
function Ajax3() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
//接受服務(wù)器返回的數(shù)據(jù)
console.log(xhr.responseText);
}
}
xhr.open('POST','/ajax/');
//post 請(qǐng)求頭
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8')
//post 請(qǐng)求發(fā)送參數(shù)d
xhr.send("p=456");
}
二赐纱、用ifarme來寫
用ajax的時(shí)候糊肤，整體的請(qǐng)求步驟是
1.向指定的url發(fā)送請(qǐng)求
2.指定的url 函數(shù)處理請(qǐng)求返回處理后
3.ajax接受處理后的請(qǐng)求助泽，來進(jìn)行下一步的操作
-
先寫一個(gè)iframe 例子認(rèn)識(shí)iframe
這input的中輸入網(wǎng)址啰扛，進(jìn)行跳轉(zhuǎn)嚎京，通過這個(gè)例子發(fā)現(xiàn)，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>
-
簡(jiǎn)單例子
用from的target屬性和iframe 的name一致創(chuàng)建綁定關(guān)系侠讯，這樣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 后臺(tái)處理form提交的用戶輸入的值
def ajaxfram(request):
if request.method == "GET":
return render(request, "index.html")
else:
return HttpResponse("ok")
-
升級(jí)必備版本，處理后臺(tái)接受的函數(shù)
要想利用iframe厢漩，做到在js處理完數(shù)據(jù)展示膜眠，就給用到iframe的onload屬性延遲加載，也就是在他等待的時(shí)候我們給他寫一個(gè)處理函數(shù)
<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 的思路是當(dāng)我們點(diǎn)擊提交的時(shí)候溜嗜，給iframe 綁定onload屬性
function AjaxSubit(){
document.getElementById('ifram').onload = reloadIframe;
document.getElementById('fm').submit();
}
我們用給onload 綁定的函數(shù)reloadIframe進(jìn)行數(shù)據(jù)處理,注意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))
