Django之Ajax提交
Django之Ajax提交
Ajax：提交数据，页面不刷新。Ajax要引入jQuery。
Ajax 是基于异步JavaScript和XML创建的交互式页面应用技术。
JS实现页面的跳转：
location.href = "/url/"
$ajax({
url:'要提交的地址'，
type:"POST", #GET 或 POST 的提交方式
data:{"k1":"v1","k2":"v2"}, #提交的数据
success:function(data){
#当前服务端处理完毕后，字典执行的回调函数
#data返回的数据
console.log(data);
if (data=='ok'):
location.href = "/url/"
else:
return HttpR......
}
})
原生Ajax：
原生Ajax 是用了一个浏览器的一个对象，这个对象是XMLHttpRequest。
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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(){
$.ajax({
url: '/add1/',
type: 'POST',
data: {'i1': $('#i1').val(),'i2': $('#i2').val()},
success:function(arg){
$('#i3').val(arg);
}
})
} function add2(){
/* GET请求
var xhr = new XMLHttpRequest(); //新创建的对象，只有创建了对象，才有open等方法。
xhr.onreadystatechange = function(){ //onreadystatechange是回调函数，只要状态发生变化，这个函数就会被执行
if(xhr.readyState == 4){ //定义等readyState的值为4时，在执行这个回调函数。
alert(xhr.responseText); //responseText是服务端返回的内容
}
};
xhr.open('GET','/add2/?i1=12&i2=19'); //open里指定打开的方式。
xhr.send(); //send 发送数据
*/
#POST请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
};
xhr.open('POST','/add2/');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("i1=12&i2=19");
}
</script>
</body>
</html>
后端代码：
from django.shortcuts import render,HttpResponse 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":
i1 = int(request.GET.get('i1'))
i2 = int(request.GET.get('i2'))
print('add2.....')
return HttpResponse(i1+i2)
else:
print(request.POST)
print(request.body) #body里是请求体数据
return HttpResponse('...')
在原生ajax中，用GET请求发送数据是不用设置请求头的，但是在POST中，是要加上
setRequestHeader('Content-Type','application/x-www-form-urlencoded') 的。
伪Ajax：伪Ajax是不用XMLHttpRequest，他是用浏览器的特性，用标签和标签的特性来伪造的。
在伪ajax中，就要说到iframe标签。
在iframe标签中的src中定义的任何网址，都会完全将这个网址搬运过来。
iframe 具有不刷新打开页面的功能。
比如在我们的index页面中，访问我们的index，在页面标签中用iframe，src设置成百度的url，
那么当我们访问index时，页面内容就是百度的内容。
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="text" id="txt1" /> //input里输入的url，提交给onclick，onclick事件交给iframe去提交。
<input type="button" value="查看" onclick="changeScr();"/>
</div>
<iframe id="ifr" style="width: 1000px;height: 2000px;" src="http://www.baidu.com.cn"></iframe>
<script>
function changeScr(){
var inp = document.getElementById('txt1').value;
document.getElementById('ifr').src = inp;
}
</script>
</body>
</html>
后端：
def baidu(request):
return render(request,'baidu.html')
用form提交ifr，也可以做到页面不刷新：
form是把数据打包发送，但页面刷新，可以form中加入iframe，也会使其页面不刷新并提交数据。
后端：
def fake_ajax(request):
if request.method == "GET":
return render(request,'fake_ajax.html')
else:
print(request.POST)
return HttpResponse('返回值')
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="f1" method="POST" action="/fake_ajax/" target="ifr"> //target是将原有的form提交方式交给ifr去提交。
<iframe id="ifr" name="ifr" style="display: none"></iframe> //用iframe提交form的数据，style为none是将整个标签隐藏起来。iframe里面放的是页面的返回值。
//iframe里面在有返回值时，会执行一个onload，表示加载了返回的数据。
<input type="text" name="user" />
<a onclick="submitForm();">提交</a> //通过a标签提交onload
</form>
<script>
function submitForm(){
document.getElementById('ifr').onload = loadIframe;
document.getElementById('f1').submit(); //通过js提交form表单
}
function loadIframe(){
var content = document.getElementById('ifr').contentWindow.document.body.innerText; //通过回调的方式，取iframe的内容。
alert(content);
}
</script>
</body>
</html>
跨域Ajax：用JSONP。
json是字符串，而jsonp是一个小技巧。
用到jsonp是因为在ajax中，存在一些问题：
ajax中的问题：
ajax访问自己的域名url是没有问题的，但是如果ajax访问其他域名的url，ajax是报错的。
其报错原因是浏览器的同源策略。
一个正常的请求经过ajax提交，并拿到返回数据返回，但是如果ajax提交的数据的url是其他的url，那么前端是拿不到的。浏览器是阻止访问的。
在这个流程中，客户的请求是发送到了服务器，并且服务器也返回了数据，只不过是浏览器给禁止的这个操作。
浏览器的同源策略：
在ajax跨域发送请求，并带有返回值返回时，浏览器是拒绝接受的。
而jsonp就是弥补这个小缺陷的。
jsonp是可以绕过浏览器的同源策略并拿到数据的。
浏览器阻止的是ajax的操作，但是并不能阻止scr属性的操作，比如script标签。
远程发请求，是要告诉对方我们的url是什么的。
所以jsonp就是这么做的。
示例：向其他网站发Http请求，
后端：
def jsonp(request):
return render(request,'jsonp.html')
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/commons.js"></script>
</head>
<body>
<a onclick="sendMsg();">发送</a>
<script>
function sendMsg(){
var tag = document.createElement('script');
//发送端，把数据拼接成script，然后把script放在html中，给他创建一个对象，加在页面就可以发送这个请求啦
tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403"; //这个url就是要跨域的。可以换成任何url。
document.head.appendChild(tag);
}
</script>
</body>
</html>
static的内容：commons.js
function list(arg){
console.log(arg);
}
API：
API就是一个url，我们总说API是个接口，其实本质就是一个url，这个url带有数据发送给来的请求。
S5的url向s4的url发送请求，并拿到s4的用户列表，
流程是点击s5的发送按钮，发送ajax请求，发送到s4的url，拿到s4的用户列表，并显示在s5的页面中。
实例：
我们定义一个服务端，叫s4，用来接收请求，并返回请求数据：
服务端的S4的的view。
import json
from django.shortcuts import render,HttpResponse
from django.core.handlers.wsgi import WSGIRequest from django.views import View def users(request):
v = request.GET.get('funcname') #获取一个动态的变量名v
print('请求来了...')
#这个user_list就是s4要返回给s5的列表数据
user_list = [
'alex','eric','egon'
]
user_list_str = json.dumps(user_list)
temp = "%s(%s)" %(v,user_list_str,) #将v的变量名赋予user_list的值，使其变量不会被当做是全局变量使用。
print(temp)
return HttpResponse(temp) def new_users(request):
print(request.method)
if request.method == "OPTIONS":
obj = HttpResponse()
obj['Access-Control-Allow-Origin'] = "*"
obj['Access-Control-Allow-Methods'] = "DELETE"
return obj obj = HttpResponse('asdfasdf')
obj['Access-Control-Allow-Origin'] = "*"
return obj
# user_list = [
# 'alex','eric','egon'
# ]
# user_list_str = json.dumps(user_list)
# obj = HttpResponse(user_list_str)
#
# obj['Access-Control-Allow-Origin'] = "*"
# return obj
我们在S5的发送请求中，去访问S4，也既是一个跨域操作，用到了Jsonp的特性。
s5的view
def jsonp(request):
# import requests
# requests.get()
# requests.post() return render(request,'jsonp.html') def cors(request):
return render(request,'cors.html')
S5的template 的前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="获取用户列表" onclick="getUsers();" />
<ul id="user_list">
</ul>
<script src="/static/jquery-1.12.4.js"></script>
<script>
/*
function getUsers(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var content = xhr.responseText;
console.log(content);
}
};
xhr.open('GET','http://www.s4.com:8001/users/');
xhr.send();
}
*/
//a = ['alex','eric','egon'] /*
function getUsers(){
var tag = document.createElement('script');
tag.src = "http://www.s4.com:8001/users/?funcname=bbb?sdd";
document.head.appendChild(tag);
} function bbb(arg){
console.log(arg);
}
*/
function getUsers(){
// XMLHttpRequest
/*
$.ajax({
url: 'http://www.s4.com:8001/users/?funcname=bbb',
type: 'GET',
success:function(arg){
console.log(arg);
}
})
*/
// JSONP
$.ajax({
url: 'http://www.s4.com:8001/users/',
type: 'POST',
dataType: 'JSONP',
jsonp: 'funcname',
jsonpCallback: 'bbb'
})
} function bbb(arg){
console.log(arg);
}
</script>
</body>
</html>
JSONP只能发GET请求。
参考：articles/5703697.html
------- END ------
Django之Ajax提交的更多相关文章
- Django中Ajax提交数据的CSRF问题
错误信息: Forbidden (CSRF token missing or incorrect.): 什么是CSRF: django为用户实现防止跨站请求伪造的功能,通过中间件 django.mid ...
- django使用ajax提交表单数据报403错解决方法
只需要在.ajaxSetup方法中设置csrfmiddlewaretoken即可 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }} ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- Django之如何预防csrf功能的方式 form提交与ajax提交
1. 什么是csrf认证: 主要是防止别人恶意登录你的账户信息用的: 2. csrf认证在django的实现方式: 分为两种, 一种是from表单提交的方式,另一种是ajax提交实现方式 前端: &l ...
- ajax提交文件，django测试脚本环境书写，froms组件，钩子函数
1.在新版本中,添加app是直接在settings设置中,将INSTALLED_APPS里添加app名字, 但是他的完整写法是 'app01.apps.App01Config' 因为新版本做了优 ...
- Django Ajax提交数据请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- python Django之Ajax
python Django之Ajax AJAX,Asynchronous JavaScript and XML (异步的JavaScript和XML),一种创建交互式网页应用的网页开发技术方案. 异步 ...
- form表单提交数据，页面必定会刷新，ajax提交数据不会刷新，做到悄悄提交,多选删除，ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
随机推荐
- 洛谷 P3254 圆桌问题【最大流】
s向所有单位连流量为人数的边,所有饭桌向t连流量为饭桌容量的边,每个单位向每个饭桌连容量为1的边表示这个饭桌只能坐这个单位的一个人.跑dinic如果小于总人数则无解,否则对于每个单位for与它相连.满 ...
- spring进行事务管理
一:spring使用注解的方式进行事务声明 1.spring的声明式事务: 用jdbc的事务管理器:DataSourceTransactionManager 首先在applicationContext ...
- 超短的判断IE javascript代码
首先说明该代码只能在IE 6~8中有效,再高级的IE已经修复这个BUG <script type=’text/javascript’> var ie = !-[1,]; alert(ie) ...
- 字符串处理/贪心 Codeforces Round #307 (Div. 2) B. ZgukistringZ
题目传送门 /* 题意:任意排列第一个字符串,使得有最多的不覆盖a/b字符串出现 字符串处理/贪心:暴力找到最大能不覆盖的a字符串,然后在b字符串中动态得出最优解 恶心死我了,我最初想输出最多的a,再 ...
- Styles and Themens(4)android自定义主题时可使用的属性
A list of the standard attributes that you can use in themes can be found at R.styleable.Theme. Cons ...
- 用for循环实现的菱形图案
package com.wh.lingxing; import java.util.Scanner; public class LingXing { public static void main(S ...
- Angular 组件之间的传值
第一种方法(传单个或者多个参数): 主页面方法: 先添加引用:private _routes: Router, Details(PBSCode) { this._routes.navigate(['p ...
- opencv4android移植到系统app
最近在尝试使用opencv4android实现投影仪的自动对焦功能,在AndroidStudio后需要将功能移到系统工程编译成系统app,仅以此文记录下移植过程中遇到的问题. 首先去opencv官网下 ...
- 契约式设计（DbC）感想（二）
契约式设计6大原则的理解 在<Design by Contract原则与实践>中,作者定义了契约式设计的6大原则: 区分命令和查询: 将基本查询和派生查询区分开: 针对每个派生查询,设定一 ...
- 手动配置wamp环境(1)--apache安装与基本操作
Apache服务器简介: Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 安装apac ...