Django Ajax 补充

发布时间：2020-12-15 17:13:10 所属栏目：大数据来源：网络整理

导读：一. Ajax ? ? ? ? - XMLHttpRequest(是jQuery调用浏览器模块) ? ? ? ? ? ? ? ? - 原生Ajax ? ? ? ? ? ? ? ? - jQuery ? ? ? ? - ‘伪’Ajax（iFrame + Form） ? ? ? ?兼容性最好 ? ? ? ? ? ? ? ? - iframe标签? ? ? ? ? ? ? ? ? - form表单原生Ajax简单代码

一. Ajax

? ? ? ? - XMLHttpRequest(是jQuery调用浏览器模块)

? ? ? ? ? ? ? ? - 原生Ajax

? ? ? ? ? ? ? ? - jQuery

? ? ? ? - ‘伪’Ajax（iFrame + Form） ? ? ? ?兼容性最好

? ? ? ? ? ? ? ? - iframe标签?

? ? ? ? ? ? ? ? - form表单

原生Ajax简单代码示例：

get

function?AjaxSubmit2()?{
????var?xhr?=?new?XMLHttpRequest();
????//?回调函数
????xhr.onreadystatechange?=?function?()?{
????????if?(xhr.readyState?==?4)?{
????????????//?接受服务端返回的数据
????????????alert(xhr.responseText);
????????}
????};
????//?请求链接
????xhr.open('GET',?'/ajax1.html?p=123');
????//?什么都不发
????xhr.send(null)
}

post

注意：django中request.post中无法获取信息，是因为django必须要发送头部信息：

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');

function?AjaxSubmit4()?{
????var?xhr?=?new?XMLHttpRequest();
????//?回调函数
????xhr.onreadystatechange?=?function?()?{
????????if?(xhr.readyState?==?4)?{
????????????//?接受服务端返回的数据
????????????alert(xhr.responseText);
????????}
????};
????//?请求链接
????xhr.open('POST',?'/ajax1.html');
????//?固定写法
????xhr.setRequestHeader('Content-Type',?'application/x-www-form-urlencoded;?charset-UTF-8');
????//?什么都不发
????xhr.send('p=456')
}
jquery——Ajax代码示例：

function?AjaxSubmit1()?{
????$.ajax({
????????url:?'/ajax1.html',????????type:?'GET',????????data:?{'p':?123},????????success:?function?(arg)?{
????????????console.log(arg)
????????}
????})
}

伪Ajax代码：

伪Ajax利用HTML标签的iframe标签具有局部加载内容的特性，所以可以使用其来伪造Ajax请求。

使用ifram框架时注意点：

? ? ? ? iframe的name值必须和form中target的值一样，否者功能无法实现

伪Ajax请求代码示例

--------------------------------index.html-------------------------------------------

<body>
<div>
????????<h6>iframe?学习</h6>
????????<div>
????????????<input?id="url"?type="text"?placeholder="请输入网址"?value="">
????????????<a?onclick="Test1()">查看</a>
????????</div>
????????<iframe?id="iframe"?style="width:?500px;height:?100px;"?src="http://www.chenxm.cc/"></iframe>
????????
????????
????????<h6>基于iframe?form表单</h6>
????????<iframe?id="idframe"?name="ifra"></iframe>
????????<form?action="/ajax1.html"?method="POST"?target="ifra">
????????????<input?name="root"?value="22222111">
????????????<input?type="submit"?value="提交">
????????</form>
????</div>
</div>
</body>
<script?typet="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script>
<script>
????function?Test1(){
????????var?url?=?$('#url').val();
????????console.log(url);
????????$('#iframe').attr('src',url)
????}
</script>

伪Ajax获取结果代码示例

--------------------------------index.html-------------------------------------------

<body>
<div>
????<h6>iframe?学习</h6>
????<div>
????????<input?id="url"?type="text"?placeholder="请输入网址"?value="">
????????<a?onclick="Test1()">查看</a>
????</div>
????<iframe?id="iframe"?style="width:?500px;height:?100px;"?src="http://www.chenxm.cc/"></iframe>
????<h6>基于iframe?form表单</h6>
????<iframe?id="idframe"?name="ifra"?onload="reloadIframe(this)"></iframe>
????<form?id='fm'?action="/ajax1.html"?method="POST"?target="ifra">
????????<input?name="root"?value="22222111">
????????<a?onclick="AjaxSubmit5()">提交</a>
????</form>
</div>
</body>

<script?typet="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script>
<script>
????function?Test1(){
????????var?url?=?$('#url').val();
????????console.log(url);
????????$('#iframe').attr('src',url)
????}
????function?AjaxSubmit5()?{

????????document.getElementById('fm').submit()
????}

????function?reloadIframe(ths)?{
????????//?js写法
????????var?content?=?ths.contentWindow.document.body.innerHTML;
????????alert(content);
????????//?jQuery?写法
{#????????var?content?=?$(ths).content().find('body').html();#}
{#????????console.log(content)#}
????}
</script>

该方法获取Ajax返回值会报错误，原因是因为html从上到下运行时，找不到reloadIframe()。

终结伪ajax方法：

--------------------------------index.html-------------------------------------------

<body>
<div>
????<h6>iframe?学习</h6>
????<div>
????????<input?id="url"?type="text"?placeholder="请输入网址"?value="">
????????<a?onclick="Test1()">查看</a>
????</div>
????<iframe?id="iframe"?style="width:?500px;height:?100px;"?src="http://www.chenxm.cc/"></iframe>
????<h6>基于iframe?form表单</h6>
????<iframe?id="idframe"?name="ifra"></iframe>
????<form?id='fm'?action="/ajax1.html"?method="POST"?target="ifra">
????????<input?name="root"?value="22222111">
????????<a?onclick="AjaxSubmit5()">提交</a>
????</form>
</div>
</body>

<script?typet="text/javascript"?src="http://code.jquery.com/jquery-latest.js"></script>
<script>
????function?Test1(){
????????var?url?=?$('#url').val();
????????alert(content);
????????$('#iframe').attr('src',url)
????}
function?AjaxSubmit5()?{
????document.getElementById('iframe').onload=reloadIframe
????document.getElementById('fm').submit()
}

function?reloadIframe()?{
????//?js写法
????var?content?=?this.contentWindow.document.body.innerHTML;
????alert(content);
????//?jQuery?写法
????//var?content?=?this.content().find('body').html();
????//console.log(content)
}
</script>

二. Ajax上传文件

? ? ? ? - jQuery

? ? ? ? - 原生Ajax

? ? ? ? ? ? ? ? 以上两种方式可利用formData对象(如果考虑低版本IE用户，建议使用iFrame+Form)

? ? ? ? - iFrame + Form（兼容性最好）

juqery上传文件方法：

????原生Ajax

????iFrame+Form

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!