Ajax全套
Posted 阜阳小全
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax全套相关的知识，希望对你有一定的参考价值。
一、Ajax，偷偷向后台发请求
- XMLHttpRequest
- 手动使用
- jQuery
- “伪”Ajax
- iframe标签
- form表单
二、Ajax上传文件
- jQuery
- 原生
以上两种方式可利用formData对象，来封装用户提交的数据
- Iframe+Form
******Iframe+Form*******
url文件
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path(‘admin/‘, admin.site.urls),
path(‘index.html/‘, views.index),
path(‘ajax1.html/‘, views.ajax1),
]
views文件
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
return render(request,‘index.html‘)
def ajax1(request):
print(request.GET)
print(request.POST)
return HttpResponse(‘‘)
index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
padding: 5px 10px;
color: orangered;
}
</style>
</head>
<body>
<h1>Ajax全套</h1>
<h3>1.Ajax发送GET请求</h3>
<div>
<a href="" class="btn" onclick="AjaxSubmit1();">点我1</a>
<a href="" class="btn" onclick="AjaxSubmit2();">点我2</a>
</div>
<h3>2.Ajax发送POST请求</h3>
<div>
<a href="" class="btn" onclick="AjaxSubmit3();">点我3</a>
<a href="" class="btn" onclick="AjaxSubmit4();">点我4</a>
</div>
<h3>3 伪ajax</h3>
<div>
<h6>基于Iframe+Form表单的ajax</h6>
<iframe src="" frameborder="1px" id="iframe" name="ifra"></iframe>
<form action="/ajax1.html/" id="fm" method="post" target="ifra">
<input type="text" name="root" value="111111">
<a href="" onclick="AjaxSubmit5()">提交</a>
{# <input type="submit" value="提交">#}
</form>
<h3>4 上传文件</h3>
<input type="file" id="img">
<a href="" class="btn" onclick="AjaxSubmit6()">上传1</a>
<a href="" class="btn" onclick="AjaxSubmit7()">上传2</a>
</div>
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="" method="POST" enctype="multipart/form-data" target="ifra1">
<input type="text" name="k1" />
<input type="text" name="k2" />
<input type="file" name="k3" />
<a onclick="AjaxSubmit8()">提交</a>
</form>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
function AjaxSubmit1() {
$.ajax({
url:‘/ajax1.html‘,
type:‘GET‘,
data:{‘p‘:123},
success:function (arg) {
console.log(arg)
}
})
}
function AjaxSubmit2() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
//接受完毕，服务器返回的数据
{#xhr.responseText //返回的文本信息#}
console.log(xhr.responseText)
}
};
xhr.open(‘GET‘,‘/ajax1.html?p=123456‘);
xhr.send(null);
}
function AjaxSubmit3() {
$.ajax({
url:‘/ajax1.html/‘,
type:‘POST‘,
data:{‘p‘:5555},
success:function (arg) {
}
})
}
function AjaxSubmit4() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
console.log(xhr.responseText)
}
};
xhr.open(‘POST‘,‘/ajax1.html/‘);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
xhr.send(‘p=66666‘);
}
function AjaxSubmit5() {
document.getElementById(‘iframe‘).onload = reloadIframe;
document.getElementById(‘fm‘).submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
if(obj.status){
alert(obj.message)
}
}
function AjaxSubmit6() {
var data = new FormData();
data.append(‘k1‘,‘v1‘);
data.append(‘k2‘,‘v2‘);
data.append(‘k3‘,document.getElementById(‘img‘).files[0]);
$.ajax({
url:‘ajax1.html/‘,
type:‘POST‘,
data:data,
success:function (arg) {
console.log(arg)
},
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
})
}
function AjaxSubmit7() {
var data = new FormData();
data.append(‘k1‘,‘v1‘);
data.append(‘k2‘,‘v2‘);
data.append(‘k3‘,document.getElementById(‘img‘).files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
};
xhr.open(‘POST‘,‘/ajax1.html/‘);
xhr.send(data);
}
function AjaxSubmit8() {
document.getElementById(‘iframe1‘).onload = reloadIframe1;
document.getElementById(‘fm1‘).submit();
}
function reloadIframe1() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
console.log(obj);
}
</script>
</body>
</html>
以上是关于Ajax全套的主要内容，如果未能解决你的问题，请参考以下文章