>[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)) ~~~