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 ...
随机推荐
- 洛谷 P2770 航空路线问题【最大费用最大流】
记得cnt=1!!因为是无向图所以可以把回来的路看成另一条向东的路.字符串用map处理即可.拆点限制流量,除了1和n是(i,i+n,2)表示可以经过两次,其他点都拆成(i,i+n,1),费用设为1,原 ...
- _bzoj1026 [SCOI2009]windy数【数位dp】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1026 数位dp果断记忆化搜索,代码量少~ 程序里我用11代表前导零. #include &l ...
- Guilty Prince LightOJ - 1012
Guilty Prince LightOJ - 1012 #include<cstdio> #include<cstring> ][]; int ans,h,w,T,TT; ] ...
- 题解报告：hdu 2844 & poj 1742 Coins（多重部分和问题）
Problem Description Whuacmers use coins.They have coins of value A1,A2,A3...An Silverland dollar. On ...
- Latex排版工具的使用（二） 分类： Latex 2014-06-14 23:01 389人阅读 评论(0) 收藏
Latex可以支持中文排版,如何实现中文支持可以到网上查找教程. 下面编写一段对中文排版的Latex源文档: 新建文件second.tex: \documentclass{article} \usep ...
- sed与正则表达式
行的开头(^) ^匹配每一行的开头 [root@sishen ~]# sed -n '/^103/ p ' employee.txt 103,Raj Reddy,Sysadmin 只有^出现在正则表达 ...
- JS 事件添加onclick写法注意。
自定义函数添加onclick事件写法注意. 错误写法:element.onclick = addclass(className); 正确写法:element.onclick = function(){ ...
- css靠左，靠右
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WCF中的异步实现
对于WCF中通讯的双方来说,客户端可以异步的调用服务:服务端对服务也能以异步的方式实现. 目录: 1.WCF客户端异步调用服务 2.服务端的异步实现 WCF客户端异步调用服务主要通过生成异步的代理类, ...
- 工作记录 主要了解EF 列注释DataAnnotations
遇到一个问题,是子类型必须完全转换为父类型,普通的显示转化.隐式转化.Cast.ConvertAll等方法无效,用Newtonsoft.Json转化才解决 var json = JsonConvert ...