Django Ajax总结
Ajax-Jquery
对话框添加，删除，修改：
添加：
Ajax偷偷向后台发请求：
1. 下载引入jQuery
2.
$.ajax({
url: '/add_classes.html',
type: 'POST',
data: {'username':'root','password': '123'},
success:function(arg){
// 回调函数，arg是服务端返回的数据
}
})
1.
Python序列化
字符串 = json.dumps(对象) 对象->字符串
对象 = json.loads(字符串) 字符串->对象
JavaScript:
字符串 = JSON.stringify(对象) 对象->字符串
对象 = JSON.parse(字符串) 字符串->对象
应用场景：
数据传输时，
发送：字符串
接收：字符串 -> 对象
2. ajax
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
success:function(arg){
// arg是字符串类型
// var obj = JSON.parse(arg)
}
})
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
发送数据时：
data中的v
a. 只是字符串或数字
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':'v1'},
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
b. 包含属组
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1':[1,2,3,4]},
dataType: 'JSON',
traditional: true,
success:function(arg){
// arg是对象
}
})
# 在服务端只要POST.get("k1")直接取
# form表单的serialize只是把它变成字典格式的，不需要使用datatype:json
#http://www.cnblogs.com/haiyan123/p/7837439.html
c. 传字典
b. 包含属组
$.ajax({
url: 'http//www.baidu.com',
type: 'GET',
data: {'k1': JSON.stringify({}) },
dataType: 'JSON',
success:function(arg){
// arg是对象
}
})
# 此时在服务器端需要使用json.load(k1)
3. 事件委托
$('要绑定标签的上级标签').on('click','要绑定的标签',function(){})
$('要绑定标签的上级标签').delegate('要绑定的标签','click',function(){})
4. 编辑
5. 总结
新URL方式：
- 独立的页面
- 数据量大或条目多
对话框方式：
- 数据量小或条目少
-增加，编辑
- Ajax: 考虑，当前页；td中自定义属性
- 页面（***）
删除：
对话框
ajax表单提交data使用values {“k”:values}
dataType:JSON 指定发送的数据格式为JSON字符串
traditional:true 当传递的数据包含数组时，需要设置此项
ajax 配合 json
{"k":[1,2,3]}
Ajax内容拾遗
1.内容拾遗
- 新URL
-提交时，保留之前的内容？？？？
- 对话框
- var data = $('#fmForm表单的ID').serialize();
$.ajax({
data: $('#fm').serialize()
})
使用BookStrap进行前端框架开发
font-awesome 图标插件
Ajax全套
发送请求
1.使用JQuery调用Ajax发送GET请求
function AjaxSubmit1() {
$.ajax({
url: '/fs/ajax1.html',
type:'GET',
data: {'p':123},
success:function (arg) {
console.log(arg)
}
})
}
2.使用JS原生发送AjaxGet请求
function AjaxSubmit2() {
var xhr = new XMLHttpRequest();
<!-- 回调函数一定要在send前执行 -->
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
// 接收完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open('GET','/fs/ajax1.html?p=123');
xhr.send(null);
}
3.使用JQuery发送AjaxPOST请求
function AjaxSubmit3() {
$.ajax({
url: '/fs/ajax1.html',
type:'POST',
data: {'p':123},
success:function (arg) {
console.log(arg)
}
})
}
4.适应JS原生代码发送AjaxPOST请求
function AjaxSubmit4() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
// 接收完毕服务器返回的数据
console.log(xhr.responseText);
}
};
xhr.open('POST','/fs/ajax1.html');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
xhr.send("p=456");
}
使用IFrame伪造Ajax请求
iframe标签
iframe标签可以在指定区域内进行页面跳转和刷新，而不影响整个页面
iframe标签+forn组件可以实现伪造的Ajax请求
<h3>3.莆田</h3>
<div>
<h6>基于Iframe+Form表单</h6>
<iframe id="iframe" name="ifra"></iframe>
<form id="fm" action="/fs/ajax1.html" method="POST" target="ifra">
<input name="root" value="111111" />
<a onclick="AjaxSubmit5()">提交</a>
</form>
</div>
function AjaxSubmit5() {
# 绑定onload事件
document.getElementById('iframe').onload = reloadIframe;
document.getElementById('fm').submit();
}
function reloadIframe() {
// this=当前标签
//console.log(ths);
//console.log(ths.contentWindow);
//console.log(ths.contentWindow.document.body.innerHTML);
//console.log($(ths).contents().find('body').html());
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
if(obj.status){
alert(obj.message);
}
}
form提交之后会刷新页面，但由于绑定了Target = ifra 所以只会刷新iframe标签中的内容而不影响全局，相当于是伪造的Ajax请求。
Ajax 上传文件
1.使用JQuery的Ajax上传文件
function AjaxSubmit6() {
//document.getElementById('img')[0]
var data = new FormData();
data.append('k1','v1');
data.append('k2','v2');
data.append('k3',document.getElementById('img').files[0]);
$.ajax({
url: '/fs/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
})
}
2.原生JS的Ajax上传文件
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','/fs/ajax1.html');
xhr.send(data);
}
Iframe+Form上传文件
案例1
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/fs/ajax1.html" 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>
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);
}
案例2，添加预览上传的文件的功能
<iframe style="display: none" id="iframe1" name="ifra1"></iframe>
<form id="fm1" action="/fs/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
<input type="file" name="k3" onchange="uploadFile();" />
</form>
<h3>预览</h3>
<div id="preview">
</div>
function uploadFile() {
document.getElementById('iframe1').onload = reloadIframe1;
document.getElementById('fm1').submit();
}
function reloadIframe1() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
# 生成上传的文件的预览
var tag = document.createElement('img');
tag.src = obj.data;
$('#preview').empty().append(tag);
}
后台
def upload_img(request):
import os
import uuid # 保证上传我文件名称不一致
nid = str(uuid.uuid4())
ret = {'status':True,'data':None,'message':None}
obj = request.FILES.get('k3')
file_path = os.path.join('static', nid+obj.name)
f = open(file_path,'wb')
for line in obj.chunks():
f.write(line)
f.close()
ret['data'] = file_path
return HttpResponse(json.dumps(ret))
使用Ajax发送跨域请求
关于浏览器的同源策略
浏览器同源策略：XMLHttpRequest，使用request发送数据时，不运行发送给其他服务器，因此只能使用标签(如img script a )中的src这样的方式访问其他服务器，这样的方式称为JSONP
1.JSONP的使用
发送过来数据必须使用一个函数包裹数据,z比如这里是fuck(数据)，然后会执行fuck函数
function submitJsonp2() {
var tag = document.createElement('script');
tag.src = 'http://127.0.0.1:9000/xiaokai.html';
document.head.appendChild(tag);
document.head.removeChild(tag);
}
function fuck(arg) {
$('#content').html(arg);
}
2.案例:Jquery使用JSONP
function submitJsonp4() {
$.ajax({
url: 'http://127.0.0.1:9000/xiaokai.html',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback', //前端传过去的callback参数
jsonpCallback: 'func' //相当于callback=func
}) //后端拿到了Callback就应该返回func(arg...)
}
function func(arg) {
console.log(arg);
}
JSONP：
利用创建script块，在期中执行src属性为：远程url
函数(返回值)
function 函数(arg){
}
注意：JSONP只能发送GET请求，即使在JQuery中写成POST，还是会默认改成GET请求进行发送
http://www.cnblogs.com/wupeiqi/articles/5369773.html
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
