一、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. 【Mongodb教程 第十八课 】MongoDB常用命令 数据库命令 集合操作命令

    面向文档的 NoSQL 数据库主要解决的问题不是高性能的并发读写,而是保证海量数据存储的同时,具有良好的查询性能.  条件操作符 <, <=, >, >=  这个操作符就不用多 ...

  2. Arrays.asList基本用法

    目录 说明 基本用法 陷阱 改观 说明 asList 是 java.util.Arrays 类的一个方法 public static <T> List<T> asList(T. ...

  3. DRP——Dom4j使用

    dom4j是一个Java的XMLAPI,类似于jdom.用来读写XML文件的.dom4j是一个很很优秀的JavaXMLAPI.具有性能优异.功能强大和极端易用使用的特点.Dom4j是一个易用的.开源的 ...

  4. 【网络协议】IP协议、ARP协议、RARP协议

    IP数据报 IP是TCP/IP协议族中最核心的协议,全部的TCP.UDP.ICMP.IGMP数据都以IP数据报的格式传输.IP仅提供尽力而为的传输服务.假设发生某种错误.IP会丢失该数据.然后发送IC ...

  5. (转载)解决MySql 数据库 提示:1045 access denied for user 'root'@'localhost' using password yes

    今天想用用MySQL 数据库  谁知道老提示 1045 access denied for user 'root'@'localhost' using password yes 最后在csdn 上找到 ...

  6. 利用PHP判断iPhone、iPad、Android、PC设备

    首页那张大图确实是一个比较头疼的问题 在PC上显示是没问题的,可是到手机上就会超出页面一大截,如果做自适应,图片会被强制压缩 无奈只能用wp_is_mobile()函数在手机上隐藏了这张图,可是这函数 ...

  7. spring list map set

    1 list <!-- result in a setSomeList(java.util.List) call --> <property name="someList& ...

  8. 增加实时性的异常url检测

    技能点: 搭建服务器.restfulapi 在py脚本中调取另一个脚本执行

  9. RFC外部断点在在SAP退出后会失效

    rfc外部断点系统退出后会删除吗?  不会删除Rfc外部断点在在SAP退出后标识还在, 但是断点会失效! 附 断点消息: ABAP 中的断点分为静态和动态两种.一. 静态断点(Static Break ...

  10. xalion三层与Web开发帖子一览表 good

    使用http.sys,让delphi 的多层服务飞起来(Delphi借用http.sys充当http服务器,也就可以发送返回JSON等信息,当然浏览器也可以使用)http://www.cnblogs. ...