>[success] # 初始 ifram ~~~ 用ajax的時候，整體的請求步驟是 1.向指定的url發送請求 2.指定的url 函數處理請求返回處理后 3.ajax接受處理后的請求，來進行下一步的操作 ~~~ >[danger] ##### 簡單案例一 * 這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> ~~~ >[danger] ##### 簡單綁定  * 用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") ~~~ >[danger] ##### 實際使用版本 * 要想利用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 的思路是當我們點擊提交的時候，給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)) ~~~