一、jQuery Ajax 和 原生Ajax

from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
url(r'^add1/', views.add1),
url(r'^add2/', views.add2),
]

urls.py

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>首页</h1>
<input type="text" id="i1">
+
<input type="text" id="i2">
=
<input type="text" id="i3"> <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();">
<input type="button" id="btn2" value="原生 Ajax" onclick="add2();"> <script src="/static/jquery-1.12.4.js"></script>
<script>
function add1() {
// jQuery Ajax
$.ajax({
url:'/add1/',
type:'POST',
data:{'i1':$('#i1').val(),'i2':$('#i2').val()},
success:function (arg) {
$('#i3').val(arg)
}
})
} function add2() {
/*
// 原生 Ajax 的 GET 方式
var xhr = new XMLHttpRequest(); // 创建对象XMLHttpRequest
xhr.onreadystatechange = function () { // onreadystatechange方法是监控当有返回值时,自动执行回调函数
if (xhr.readyState == 4){
// Number readyState 状态值(整数)
// 详细:
// 0-未初始化,尚未调用open()方法;
// 1-启动,调用了open()方法,未调用send()方法;
// 2-发送,已经调用了send()方法,未接收到响应;
// 3-接收,已经接收到部分响应数据;
// 4-完成,已经接收到全部响应数据;
document.getElementById('i3').value = xhr.responseText // responseText 拿到返回值字符串并赋值给id='i3'的input框
}
};
xhr.open('GET','/add2/?i1='+document.getElementById('i1').value+'&'+'i2='+document.getElementById('i2').value); // 以GET的形式向URL 为add2发送数据
xhr.send() // 发送数据 */ // 原生 Ajax 的 POST 方式
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { // onreadystatechange方法是监控当有返回值时,自动执行回调函数
if (xhr.readyState == 4){
// Number readyState 状态值(整数)
// 详细:
// 0-未初始化,尚未调用open()方法;
// 1-启动,调用了open()方法,未调用send()方法;
// 2-发送,已经调用了send()方法,未接收到响应;
// 3-接收,已经接收到部分响应数据;
// 4-完成,已经接收到全部响应数据;
document.getElementById('i3').value = xhr.responseText // responseText 拿到返回值字符串并赋值给id='i3'的input框
}
};
xhr.open('POST','/add2/');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // 设置请求头协议
xhr.send('i1='+document.getElementById('i1').value+'&'+'i2='+document.getElementById('i2').value) // 发送的数据格式
}
</script>
</body>
</html>

index.html

from django.shortcuts import render,HttpResponse,redirect

def index(request):
return render(request,'index.html') def add1(request):
a1 = int(request.POST.get('i1'))
a2 = int(request.POST.get('i2'))
return HttpResponse(a1+a2) def add2(request):
if request.method == 'GET':
a1 = int(request.GET.get('i1'))
a2 = int(request.GET.get('i2'))
return HttpResponse(a1+a2)
else:
a1 = int(request.POST.get('i1'))
a2 = int(request.POST.get('i2'))
return HttpResponse(a1+a2)

Views.py

二、伪造的Ajax

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="f1" method="POST" action="/fake_ajax/" target="ifr"> {# target="ifr 表示不通过POST提交了,而是把数据交给iframe 由iframe提交#}
<iframe id="ifr" name="ifr" style="display: none"></iframe>
<input type="text" name="user"/>
<a onclick="submiForm();">提交</a>
</form> <script>
function submiForm() {
document.getElementById('ifr').onload = loadIframe;
document.getElementById('f1').submit()
} function loadIframe() {
var content = document.getElementById('ifr').contentWindow.document.body.innerText;
}
</script>
</body>
</html>

fake_ajax.html

def fake_ajax(request):
if request.method == 'GET':
return render(request,'fake_ajax.html')
else:
print(request.POST)
return HttpResponse('I am 返回值')

Views.py

 三、三种Ajax上传文件方法

import os
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST,request.FILES)
file_obj = request.FILES.get('key')
print(file_obj)
print(file_obj.name)
file_path = os.path.join('static',file_obj.name)
with open(file_path,'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk)
return HttpResponse(file_path)

Views.py

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>原生Ajax上传文件</h1>
<input type="file" id="i1">
<a onclick="upload1();">上传</a>
<div id="container1"></div> <h1>jQuery Ajax上传文件</h1>
<input type="file" id="i2">
<a onclick="upload2();">上传</a>
<div id="container2"></div> <h1>伪Ajax上传文件</h1>
{# 伪Ajax上传一定要在from中加属性: enctype="multipart/form-data" #}
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
<iframe id="ifr" name="ifr" style="display: none;"></iframe>
<input type="file" name="key">
<a onclick="upload3()">上传</a>
</form>
<div id="container3"></div> <script src="/static/jquery-1.12.4.js"></script>
<script> // 原生Ajax上传文件
function upload1() {
var forData = new FormData();
{# forData.append('k1','v1'); k1 为键,v1 为字符串对象或者文件对象 #}
{# 值为document对象,files为一个列表,[0]表示取第一个文件 #}
forData.append('key',document.getElementById('i1').files[0]); var xhr = new XMLHttpRequest();
xhr.open('POST','/upload/');
xhr.send(forData); {# 发送存在forData中的数据 #}
xhr.onreadystatechange = function () { {# 回调函数 #}
if (xhr.readyState == 4){ {# 当返回值全部加载完成时 #}
var file_path = xhr.responseText; {# xhr.responseText取到返回值(返回值为文件路径) #}
var tag = document.createElement('img'); {# 创建img标签 #}
tag.src = '/' + file_path; {# 设置img标签的路径 #}
document.getElementById('container1').appendChild(tag); {# 在页面中添加img标签到相应的位置 #}
}
};
} // jQuery Ajax上传文件
function upload2() {
var forData = new FormData();
forData.append('key',$('#i2')[0].files[0]);
// jquery对象转为document对象时,在后边加[0]
// $('#i2') -> $('#i2')[0]
// document对象转为jquery对象时,直接给document对象加$
// document.getElementById('i1') -> $(document.getElementById('i1')) $.ajax({
url:'/upload/',
type:'POST',
data:forData,
contentType:false,
processData:false,
success:function (arg) { {# 回调函数 #}
var tag = document.createElement('img'); {# 创建img标签 #}
tag.src = '/' + arg; {# 设置img标签的路径 #}
$('#container2').append(tag); {# 在页面中添加img标签到相应的位置 #}
}
})
} // 伪Ajax上传文件
function upload3(){
document.getElementById('ifr').onload = loadIframe;
document.getElementById('f1').submit(); }
function loadIframe(){
var content = document.getElementById('ifr').contentWindow.document.body.innerText;
var tag = document.createElement('img');
tag.src = "/"+ content;
$('#container3').append(tag);
} </script> </body>
</html>

upload.html

 四、JSONP(解决浏览器的同源策略)和CORS跨域资源共享

- JSONP
- 同源策略
- 限制:Ajax(包括原生Ajax和jQuery Ajax)
- 不限制:script 标签中的src属性链接到别的网址 开发需求:向其他网站发Http请求
- 浏览器直接发送请求【考虑同源】
- 浏览器->服务端->发送请求【不考虑同源】 浏览器直接发送请求【考虑同源】 要求:
1. 客户端
- URL?callback=funcname
- function funcname(arg){
console.log(arg)
} 2. 服务端
- 获取 funcname = request.GET.get(callback)
- 返回:
funcname = request.GET.get('callback') # 动态获取函数名
user_list = [
'alex','eric','egon'
]
user_list_str = json.dumps(user_list) # 转为json字符串
temp = "%s(%s)" %(funcname,user_list_str,) # 返回 "函数名(json字符串参数)"
return HttpResponse(temp) 使用:
1. 自己写动态创建script
function getUsers(){
var tag = document.createElement('script');
tag.src = "http://www.s4.com:8001/users/?callback=funcname";
document.head.appendChild(tag);
} function funcname(arg){
console.log(arg);
} 2. jQuery
$.ajax({
url: 'http://www.s4.com:8001/users/',
type: 'GET',
dataType: 'JSONP', # 类型
jsonp: 'callback', # 后台通过request.GET.get(callback)获取到funcname函数名
jsonpCallback: 'funcname'
}) function funcname(arg){
console.log(arg);
} 其他:
- 只能发GET请求
- 约定 JSONP是一种方式,目的解决跨域问题 - CORS 跨域资源共享 简单请求: def new_users(request):
obj = HttpResponse('返回内容')
obj['Access-Control-Allow-Origin'] = "*" #不限制任何请求
return obj 复杂请求:
HTML:
<script>
function getUsers(){
$.ajax({
url: 'http://www.s4.com:8001/new_users/',
type:"DELETE",
success:function(arg){
console.log(arg);
}
})
}
</script>
def new_users(request): if request.method == "OPTIONS": #预检 复杂请求来了方法都是OPTIONS
obj = HttpResponse()
obj['Access-Control-Allow-Origin'] = "*"
obj['Access-Control-Allow-Methods'] = "DELETE"
return obj obj = HttpResponse('想要访问的数据')
obj['Access-Control-Allow-Origin'] = "*" #不限制任何请求
return obj
其他:
- 任何请求

笔记

django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享的更多相关文章

  1. egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名

    egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名 评论:10 · 阅读:8437· 喜欢:0 一.需求 二.CSRF 校验 三.通过 form 表单上传文件 四.通过 ...

  2. 4 伪ajax:jsonp、cors 跨域请求

    一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...

  3. Django CORS跨域资源共享

    1,什么是CORS ​ 允许浏览器向跨源(协议 + 域名 + 端口)服务器发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制 2,特点 ​ 1,浏览器自动完成(在请求头中加入特 ...

  4. ajax跨域原理和cors跨域资源共享

    不需要设置前端太多,只需要在服务端是在请求头,使服务端的回复数据可以正常通过浏览器的限制,进入网站 首先说下简单请求和非简单请求: 简单请求:必须满足下列条件 1.请求方式:head,get,post ...

  5. 三种ajax上传文件方法

    1.  XMLHttpRequest(原生ajax) <input class="file" type="file" id="fafafa&qu ...

  6. ajax跨域通过 Cors跨域资源共享 进行GetPost请求

    using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Ne ...

  7. 工作笔记4.struts2上传文件到server

    本文介绍两种:上传文件到server的方式   一种是提交Form表单:还有一种是ajaxfileupload异步上传. 一.JSP中:     1.提交Form表单 为了能完毕文件上传,我们应该将这 ...

  8. jQuery.form 上传文件

    今年大部分是都在完善产品,这几天遇到了一个问题,原来的flash组件不支持苹果浏览器,需要改.在网上搜了下,看到一个jQuery.form插件可以上传文件,并且兼容性很好,主要浏览器大部分都兼容,插件 ...

  9. python笔记-20 django进阶 (model与form、modelform对比,三种ajax方式的对比,随机验证码,kindeditor)

    一.model深入 1.model的功能 1.1 创建数据库表 1.2 操作数据库表 1.3 数据库的增删改查操作 2.创建数据库表的单表操作 2.1 定义表对象 class xxx(models.M ...

随机推荐

  1. postgresql:pgadmin函数调试工具安装过程

    通过安装第三方插件pldebugger,可实现在pgadmin客户端对函数设置断点.调试,具体过程如下: 1.下载pldebugger安装包:http://git.postgresql.org/git ...

  2. Android调用相册拍照控件实现系统控件缩放切割图片

    android 下如果做处理图片的软件 可以调用系统的控件 实现缩放切割图片 非常好的效果 今天写了一个demo分享给大家 package cn.m15.test; import java.io.By ...

  3. 支持取消操作和暂停操作的Backgroundworker

    这也是今天讨论的话题.取消是默认就支持的,而暂停则默认不支持.但通过ManualResetEvent可以对其进行干预. using System; using System.Collections.G ...

  4. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  5. 不相交集合ADT

    不相交集合数据结构保持一组不相交的动态集合S={S1,S2,...,SK},每个集合通过一个代表来识别,代表即集合中的某个成员. 如果x表示一个对象,不相交集合支持以下操作: MAKE-SET(x): ...

  6. apache 2.4.9 配置其他客户端访问 required all granted

    <Directory /> AllowOverride all #修改地方 Require all granted </Directory> # # Note that fro ...

  7. trove taskmanger api

    trove-taskmanager服务在配置实例,管理实例的生命周期以及对数据库实例执行操作方面做了很多工作.taskmanager会通过Nova.Swift的API访问Openstack基础的服务, ...

  8. C语言学生管理系统(增进版)

    在原版上进行改进,主要改进的功能有. 1.利用atof:将字符串转换为浮点型: 利用atoi:将字符串转换为整型: 原文地址:http://www.cnblogs.com/sddai/p/577412 ...

  9. js -【 数组】判断一个变量是数组类型的几种方法

    怎么判断一个数组是数组呢? 其实这个也是一个常考的题目.依稀记得我为数不多的面试经过中都被问道过. 方案一: instanceof variable instanceof Array 解决思路: 使用 ...

  10. log4j(三)——如何控制不同级别的日志信息的输出?

    一:测试环境与log4j(一)——为什么要使用log4j?一样,这里不再重述 二:老规矩,先来个栗子,然后再聊聊感受 import org.apache.log4j.*; //by godtrue p ...