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 ...
随机推荐
- Code：Blocks 中文乱码问题原因分析和解决方法
下面说说修改的地方. 1.修改源文件保存编码在:settings->Editor->gernal settings 看到右边的Encoding group Box了吗?如下图所示: Use ...
- 重置iptables
# reset the default policies in the filter table.iptables -P INPUT ACCEPTiptables -P FORWARD ACCEPTi ...
- Java键盘输入的方法
转载:http://blog.csdn.net/u012249177/article/details/49586383 java输入的方法: import java.io.BufferedReader ...
- LoadRunner12学习之路（6-8）
六.创建负载测试场景 如何启动控制器? 要开始开发场景,请打开LoadRunner Controller. 打开HPE LoadRunner Controller. 在LoadRunner机器上,单击 ...
- 贪心/思维题 Codeforces Round #310 (Div. 2) C. Case of Matryoshkas
题目传送门 /* 题意:套娃娃,可以套一个单独的娃娃,或者把最后面的娃娃取出,最后使得0-1-2-...-(n-1),问最少要几步 贪心/思维题:娃娃的状态:取出+套上(2),套上(1), 已套上(0 ...
- 数学 Codeforces Round #308 (Div. 2) B. Vanya and Books
题目传送门 /* 水题:求总数字个数,开long long竟然莫名其妙WA了几次,也没改啥又对了:) */ #include <cstdio> #include <iostream& ...
- ACM_素数环（dfs）
Problem Description: 如图所示,环由n个圆组成. 将自然数1,2,...,n分别放入每个圆中,并且两个相邻圆中的数字总和应为素数. 注意:第一个圆圈的数量应该始终为1. Input ...
- 题解报告：hdu 1263 水果
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 Problem Description 夏天来了~~好开心啊,呵呵,好多好多水果~~ Joe经营 ...
- 题解报告：hdu 2084 数塔（递推dp）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2084 Problem Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这 ...
- D. Arpa's weak amphitheater and Mehrdad's valuable Hoses 分组背包模板题
http://codeforces.com/problemset/problem/742/D 并查集预处理出所有关系. 一开始的时候,我预处理所有关系后,然后选择全部的时候,另起了一个for,然后再判 ...