python Ajax
Ajax
一.准备知识JSON
1.什么是json
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性,更易理解
2.stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法:
(1).JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象 JSON.parse('{"name":"alex"}');
(2)JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。 JSON.stringify({"name":"alex"})
3.和XML的比较
JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多
可以大大得节约传输数据所占用得带宽。
XML格式:
<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>
JASON 格式
<?xml version="1.0" encoding="utf-8"?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<cities>
<city>哈尔滨</city>
<city>大庆</city>
</cities>
</province>
<province>
<name>广东</name>
<cities>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</cities>
</province>
<province>
<name>台湾</name>
<cities>
<city>台北</city>
<city>高雄</city>
</cities>
</province>
<province>
<name>新疆</name>
<cities>
<city>乌鲁木齐</city>
</cities>
</province>
</country>
二.AJAX简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行
异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在
不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。 三.AJAX应用场景
搜索引擎根据用户输入的关键字,自动提示检索关键字。
注册时候的用户名的查重。
四.AJAX的优缺点
优点:
AJAX使用JavaScript技术向服务器发送异步请求;
AJAX请求无须刷新整个页面;
数据量不大;
因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
缺点:
给服务器造成很大压力 五.jQuery实现的AJAX
views:
from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from django.views.decorators.csrf import ensure_csrf_cookie #form提交 def func(request):
f,s,sum='','',''
if request.method=='POST':
f=int(request.POST.get('f'))
s=int(request.POST.get('s'))
sum=f+s
return render (request,'func.html',{"f":f,'s':s,'sum':sum})
#ajax提交
@ensure_csrf_cookie #仅用于ajax提交中解决csrf
def calc(request):
f=int(request.POST.get('f'))
s=int(request.POST.get('s'))
res=f+s
return HttpResponse(res)
html :
<h1>表单提交</h1> <form action="" method="post">
{% csrf_token %}
<input type="text" name="f" value="{{ f }}">+
<input type="text" name="s" value="{{ s }}">=
<input type="text" name="sum" value="{{ sum }}">
<button type="submit">计算</button>
</form> <h1>ajax提交</h1> <input type="text" id="f">+
<input type="text" id="s">=
<input type="text" id="sum">
<button type="submit" id="b1">计算</button>
<hr>
<button type="submit" id="test">测试数据</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="/static/ajax_setup.js"></script>
<script>
$('#b1').click(function(){
var f=$('#f').val();
var s=$('#s').val();
$.ajax({
url:'/calc/', //url通过此路径匹配相应的函数
type:'POST',
{#方法二解决csrf#}
{#headers: {"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#}
data:{
{#方法一解决csrf'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(),#}
'f':f,
's':s , },
success:function(res){
console.log(res);
$('#sum').val(res);
},
})
});
$.ajax参数:
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
success:function (data) {
$("#i3").val(data);
}
})
})
六.JS实现AJAX
var b2 = document.getElementById("b2");
b2.onclick = function () {
// 原生JS
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=q1mi&password=123456");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
七.AJAX请求如何设置csrf_token
(一).通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送
data: {
"username": "Q1mi",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
},
(二).通过获取返回的cookie中的字符串 放置在请求头中发送
#headers: {"X-CSRFToken":$("[name='csrfmiddlewaretoken']").val()},#}
(三).自己写一个getCookie方法
static 文件中写:
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken'); function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
} $.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
views:
1.from django.views.decorators.csrf import ensure_csrf_cookie
2.@ensure_csrf_cookie给对应函数加装饰器
八.AJAX上传文件
views:
#表单上传
def upload(request):
if request.method=='POST':
file_obj=request.FILES.get('file')
print(file_obj)
with open(file_obj.name,'wb')as f:
for i in file_obj:
print(i)
f.write(i)
return render(request,'upload.html')
ajax上传:
def ajax_upload(request):
file_obj=request.FILES.get('f')
print(file_obj.name)
with open(file_obj.name, 'wb')as f:
for i in file_obj:
print(i)
f.write(i)
return HttpResponse('上传成功')
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{#{% csrf_token %}#}
{# //表单上传 #}
{#<form action="" method="post" enctype="multipart/form-data">#}
{##}
{# <input type="file" name="file">#}
{# <button>上传</button>#}
{#</form>#}
{# ajzx上传 #}
<h1>ajax上传</h1>
<input type="file" name="file" id="f">
<button type="submit" id="bt">上传</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('#bt').click(function() {
var formData = new FormData();
formData.append('csrfmiddlewaretoken', $("[name='csrfmiddlewaretoken']").val());
formData.append('f', $('#f')[0].files[0]);
$.ajax({
url: "/ajax_file/",
type:'POST',
processData: false,
contentType: false,
data:formData,
success:function(data){
{#console.log(data)#}
$('body').html(data)
}
})
})
</script>
</body>
python Ajax的更多相关文章
- python -- ajax数组传递和后台接收
phper转pythoner 在当初使用php做网站开发的时候,前端ajax传递数据的时候,就是直接将一个数组传递过去,后台用$_POST['key']接收即可,没有考虑那么细,想来这不都是理所当然的 ...
- python Ajax的使用
转自:http://www.cnblogs.com/python-study/p/6060530.html 1.使用Ajax在后台传递参数的示例 要使用Ajax传递参数,需要使用jquery,使用jq ...
- python ajax post 数据
简单的html <div> <input type="submit" id="tes" value="tes"> & ...
- JSON 的正确用法:Python、MongoDB、JavaScript与AjaxJSON 的正确用法:Python、MongoDB、JavaScript与Ajax
本文主要总结网站编写以来在传递 JSON 数据方面遇到的一些问题以及目前采用的解决方案.网站数据库采用 MongoDB,后端是 Python,前端采用“半分离”形式的 Riot.js,所谓半分离,是说 ...
- My First Django Project - <Django + MySQL + Ajax> (1)
因为最近工作有些信息需要额外花时间去收集,但是现在有相关的operations每天记录状态,但是没有一个很好的状态收集工具,将状态收集起来,所以很多情况下我们不知道是状态变好了,还是变差.如果使用EX ...
- python 各种开源库
测试开发 来源:https://www.jianshu.com/p/ea6f7fb69501 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装. 链接 sel ...
- python 三方面库整理
测试开发 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装. selenium - web UI自动化测试. –推荐 mechanize- Python中有状 ...
- Python 总结
python3.7下载地址 Python安装pip 1.首先检查linux有没有安装python-pip包,直接执行 yum install python-pip 2.没有python-pip包就执行 ...
- Python测试 ——开发工具库
Web UI测试自动化 splinter - web UI测试工具,基于selnium封装. selenium - web UI自动化测试. mechanize- Python中有状态的程序化Web浏 ...
随机推荐
- MySQL之CONCAT()的用法
mysql CONCAT()函数用于将多个字符串连接成一个字符串,是最重要的mysql函数之一,下面就将为您详细介绍mysql CONCAT()函数,供您参考 mysql CONCAT(str1,st ...
- Python爬虫基础之Cookie
一.Cookie会话 简单地说,cookie就是存储在用户浏览器中的一小段文本文件.Cookies是纯文本形式,它们不包含任何可执行代码.一个Web页面或服务器告之浏览器来将这些信息存储并且基于一系列 ...
- ELK搭建<二>:安装ES插件head
1.去github下载head,针对ES版本不同,安装方式也不一样, =>在2.x以前版本可以通过插件安装 for Elasticsearch 2.x: sudo elasticsearch/b ...
- linux文件删除原理
文件删除的原理 linux的文件名是存在父目录的block里面的,并指向这个文件的inode节点,这个文件的inode节点在标记指向存放这个文件的block的数据块.我们删除文件,实际上不是清除ino ...
- Redis数据类型SortedSET
Sorted Set有点像Set和Hash的结合体.和Set一样,它里面的元素是唯一的,类型是String,所以它可以理解为就是一个Set.但是Set里面的元素是无序的,而Sorted Set里面的元 ...
- Selenium 常用API
浏览器相关操作 启动浏览器 driver = new ChromeDriver(); 控制浏览器窗口大小 maximize() 设置浏览器最大化 setSize() 设置浏览器窗口的宽与高 访问网页 ...
- Convolutional Neural Network in TensorFlow
翻译自Build a Convolutional Neural Network using Estimators TensorFlow的layer模块提供了一个轻松构建神经网络的高端API,它提供了创 ...
- unity skybox天空盒分享无需下载
大概有几十种还是100种,具体忘了 反正很多就是了(哈哈哈哈哈!!!!!!!!!!!!) 老铁们, 多谢支持,谢谢大家. 根据需要使用,下面会分享出下载链接: 链接:https://pan.baidu ...
- Linux进程和端口互相查看方法
一.查找应用进程的端口 ps -ef |grep mysql 查看进程 ps:将某个进程显示出来 -A 显示所有程序. -e 此参数的效果和指定"A"参数相同. -f 显示UID ...
- mac环境下jdk配置
查看mac下jdk路径 当在Mac下安装完Java运行环境,而又没有添加JAVA_HOME变量的时候,我们如何得到JAVA_HOME变量的路径呢?直接在home目录下执行命令:/usr/libexec ...