目录
伪Ajax(iframe)
由于HTML标签的iframe标签具有局部加载内容的特性,所以可以使用其来伪造Ajax请求。
<body>
<input type="text" id="url" />
<input type="button" value="发送iframe请求" onclick="iframeRequest();" />
<iframe id="ifm" src="http://www.baidu.com"></iframe>
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function iframeRequest(){
var url = $("#url").val();
console.log(url);
$("#ifm").attr("src", url);
}
</script>
</body>
<body>
<form action="/ajax_json/" method="POST" target="ifm1"> <!-- 通过target属性,将form和iframe建立关系,表单一提交,就会通过iframe将数据提交到后台,页面将不刷新 -->
<iframe name="ifm1" id="ifm1"></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" value="Form提交" />
</form>
<script src="/static/jquery-1.12.4.js"> </script>
<script>
</script>
</body>
如何得到后台返回的数据:
<body>
<form action="/ajax_json/" method="POST" target="ifm1"> <!-- 通过target属性,将form和iframe建立关系,表单一提交,就会通过iframe将数据提交到后台,页面将不刷新 -->
<!--<iframe name="ifm1" onload="iframeLoad();"></iframe>-->
<iframe name="ifm1" id="ifm1"></iframe>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="submit" value="Form提交" onclick="submitForm();"/>
</form>
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function submitForm(){
$("#ifm1").load(function(){
var text = $("#ifm1").contents().find("body").text();
var obj = JSON.parse(text);
});
}
/*function iframeLoad(){
console.log(123);
}*/
</script>
</body>
原生Ajax
Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件)。
XmlHttpRequest对象
XmlHttpRequest对象的主要方法:
a. void open(String method,String url,Boolen async)
用于创建请求
参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型)
b. void send(String body)
用于发送请求
参数:
body: 要发送的数据(字符串类型)
c. void setRequestHeader(String header,String value)
用于设置请求头
参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型)
d. String getAllResponseHeaders()
获取所有响应头
返回值:
响应头数据(字符串类型)
e. String getResponseHeader(String header)
获取响应头中指定header的值
参数:
header: 响应头的key(字符串类型)
返回值:
响应头中指定的header对应的值
f. void abort()
终止请求
XmlHttpRequest对象的主要属性:
a. Number readyState
状态值(整数)
详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;
b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数)
c. String responseText
服务器返回的数据(字符串类型)
d. XmlDocument responseXML
服务器返回的数据(Xml对象)
e. Number states
状态码(整数),如:200、404...
f. String statesText
状态文本(字符串),如:OK、NotFound...
跨浏览器支持
- XmlHttpRequest: IE7+, Firefox, Chrome, Opera, etc.
- ActiveXObject(“Microsoft.XMLHTTP”): IE6, IE5
例子:
views.py
def ajax(request):
return render(request, 'ajax.html')
def ajax_json(request):
ret = {'status': True, 'data': request.POST.get('username')}
import json
return HttpResponse(json.dumps(ret)) #, status=404, reason='Not Found'
ajax.html
<body>
<input type='text' />
<input type="button" value="Ajax1" onclick="Ajax1();" />
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function getXHR(){ // 解决浏览器兼容性问题
var xhr = null;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
function Ajax1(){
var xhr = getXHR();
xhr.open("GET", "/ajax_json/", true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//接收数据
//console.log(xhr.responseText)
var obj = JSON.parse(xhr.responseText)
console.log(obj)
}
};
xhr.setRequestHeader("k1", "v1");
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 发post请求,必须加,不然数据发不过去
xhr.send("name=root;pwd=123");
}
</script>
</body>
jQuery Ajax
作用:前端页面验证
jQuery.get(...) # 参数非字典
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式,xml, json, script, text, html
jQuery.post(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式,xml, json, script, text, html
jQuery.getJSON(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
jQuery.getScript(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
jQuery.ajax(...) # 参数是字典
部分参数:
url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒)
beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局)
accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式
使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数
如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
},
// Expect a `mycustomtype` back from server
dataType: 'mycustomtype'
// Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
});
demo1
$('#ajax_submit').click(function(){
$.ajax({
url: '/test_ajax/',
type: "POST",
#data: $('#add_form').serialize() # form表单中的所有可以提交的值打包发送到后台
data: {'hostname': $('#host').val(), 'ip': $('#ip').val(), 'port': $('#port').val(), 'b_id': $('#sel').val()},
//function有三个参数,其中的第2个或第3个就是XMLHttprequest对象
success: function(data){
// data是服务器端返回的字符串
var obj = JSON.parse(data)
if(obj.status){
location.reload();
}else{
$('#error_msg').text(obj.error);
}
}
})
});
def test_ajax(request):
ret = {"status": True, "error": None, "data": None}
try:
print(request.method, request.POST, sep="\t")
h = request.POST.get('hostname')
i = request.POST.get('ip')
p = request.POST.get('port')
b = request.POST.get('b_id')
if h and len(h) > 5:
models.Host.objects.create(hostname=h,
ip=i,
port=p,
b_id=b)
else:
ret['status'] = False
ret['error'] = '太短了'
except Exception as e:
ret['status'] = False
ret['error'] = '请求错误'
return HttpResponse(json.dumps(ret))# HttpResponse的参数是字符串,ret是一个字典,所以需要通过json将字典转换成字符串
demo2
$('#add_submit_ajax').click(function(){
$.ajax({
url: '/ajax_add_app/',
//data: {"user": 123, 'host_list': [1,2,3,4]},
data: $('#add_form').serialize(),
type: "POST",
traditional: true, # 需要这个属性,才可以将前端的列表、字典发送到后端
dataType: "JSON", # 帮我们处理了转换的过程,直接返回给我们对象的格式
//function有三个参数,其中的第2个或第3个就是XMLHttprequest对象
success: function(obj){
},
error: function(){
}
});
});
def ajax_add_app(request):
ret = {"status": True, "error": None, 'data': None}
print(request.POST.get('app_name'))
print(request.POST.getlist('host_list'))
app_name = request.POST.get('app_name')
host_list = request.POST.getlist('host_list')
obj = models.Application.objects.create(name=app_name)
obj.r.add(*host_list)
return HttpResponse(json.dumps(ret))
补充:
前端对象转换成字符串
li = [1,2,3,4]
json.stringify(li)
时机:如果发送的是【普通数据】——> jquery, ajax, iframe
基于ajax的文件上传
def upload_file(request):
username = request.POST.get("username")
fafafa = request.FILES.get('fafafa')
print(username, fafafa)
import os
img_path = os.path.join('static/imgs', fafafa.name)
with open(img_path, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
ret = {'status': True, 'data': img_path}
import json
return HttpResponse(json.dumps(ret))
原生的ajax文件上传
<body>
<div style="position: relative; width: 100px; height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload"> 上传 </a>
</div>
<!--XHR提交和JQuery提交都用到了FormData,但并不是所有的浏览器都支持FormData,比如IE-->
<input style="top: 160px;" type="button" value="提交XHR" onclick="xhrSubmit();" />
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function xhrSubmit(){
// $("#fafafa")[0] jquery对象
var file_obj = document.getElementById("fafafa").files[0]; // document对象
var fd = new FormData();
fd.append("username", "root");
fd.append("fafafa", file_obj);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload_file/", true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//接收数据
//console.log(xhr.responseText)
var obj = JSON.parse(xhr.responseText)
console.log(obj)
}
};
xhr.send(fd);
}
</script>
</body>
基于jquery的ajax文件上传
<body>
<div style="position: relative; width: 100px; height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload"> 上传 </a>
</div>
<!--XHR提交和JQuery提交都用到了FormData,但并不是所有的浏览器都支持FormData,比如IE-->
<input style="top: 160px;" type="button" value="提交JQuery" onclick="jqSubmit();" />
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function jqSubmit(){
// $("#fafafa")[0]
var file_obj = document.getElementById("fafafa").files[0];
var fd = new FormData();
fd.append("username", "root");
fd.append("fafafa", file_obj);
$.ajax({
url: "/upload_file/",
type: "POST",
data: fd,
processData: false, // tell jQuery not to process the data, 不要做特殊的处理
contentType: false, // tell jQuery not to set contentType, 不要做特殊的处理
success: function(arg, a1, a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
});
}
</script>
</body>
伪ajax文件上传+文件预览
<body>
<div style="position: relative; width: 100px; height: 50px;">
<input class="file" type="file" id="fafafa" name="afafaf" />
<a class="upload"> 上传 </a>
</div>
<form id="fm1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe name="ifm1" id="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpload();" /> <!-- 文件选中即上传 -->
<input type="submit" value="提交iframe" onclick="iframeSubmit();"/>
</form>
<script src="/static/jquery-1.12.4.js"> </script>
<script>
function changeUpload(){
$("#ifm1").load(function(){
var text = $("#ifm1").contents().find("body").text();
var obj = JSON.parse(text);
$("#preview").empty();
var imgTag = document.createElement("img");
imgTag.src = "/" + obj.data;
$("#preview").append(imgTag);
});
$("#fm1").submit();
}
function iframeSubmit(){
$("#ifm1").load(function(){ //通过load拿到返回值
var text = $("#ifm1").contents().find("body").text();
var obj = JSON.parse(text);
$("#preview").empty();
var imgTag = document.createElement("img");
imgTag.src = "/" + obj.data;
$("#preview").append(imgTag);
});
}
</script>
</body>
时机:如果发送的是【文件】——>iframe, jquery(FormData), ajax(FormData)