django框架ajax
参考 博文https://www.cnblogs.com/yuanchenqi/articles/9070966.html
Ajax
简单示例：
file_put文件上传页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head>
<body> <h3>简单的form</h3> <form action="" method="post">
用户名<input type="text" name="user">
密码<input type="password" name="pwd">
<input type="submit">
</form> <h3>基于form表单的文件上传</h3> <form action="" method="post" enctype="multipart/form-data"> 上传文件必须添加：
用户名<input type="text" name="user">
头像 <input type="file" name="avatar">
<input type="submit">
</form> <h3> 基于Ajax文件上传</h3> <form action="" method="post">
用户名<input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" class="btn" value="Ajax">
</form> <script> {##}
{# $(".btn").click(function(){#}
{##}
{# $.ajax({#}
{# url:"",#}
{# type:"post",#}
{# contentType:"application/json",#} // json数据串request.body中有数据，POST中没有数据
{# data:JSON.stringify({#}
{# a:1,#}
{# b:2#}
{# }),#}
{# success:function(data){#}
{# console.log(data)#}
{# }#}
{# })#}
{##}
{##}
{##}
{# })#}
{# #} {# $(".btn").click(function(){#}
{##}
{# $.ajax({#}
{# url:"",#}
{# type:"post",#}
{# data:{#}
{# a:1,#}
{# b:2#}
{# },#}
{# success:function(data){#}
{# console.log(data)#}
{# }#}
{# })#}
{##}
{# })#} // ajax上传文件
$(".btn").click(function(){ var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("avatar",$("#avatar")[0].files[0]); $.ajax({
url:"",
type:"post",
contentType:false, //编码格式
processData:false, //数据不做预处理
data:formdata, //因为是formdata数据所以上面添加参数contentType、processData
success:function(data){
console.log(data)
}
})
})
</script> </body>
</html>
index页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
</head>
<body> <h2>this is Index!</h2> <button class="Ajax">Ajax</button> <p class="content"></p> <hr> <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret">
<button class="cal">计算</button> <hr> <form>
用户名 <input type="text" id="user">
密码 <input type="password" id="pwd">
<input type="button" value="submit" class="login_btn"><span class="error"></span>
</form> <script> $(".Ajax").click(function () { //发送Ajax请求
$.ajax({
url: "/test_ajax/", // 请求url
type: "get", // 请求方式post
data: {a: 1, b: 2},
success: function (data) { // 回调函数
console.log(data);
$(".content").html(data) } }) }); // Ajax计算求值
$(".cal").click(function () { $.ajax({
url: "/cal/",
type: "post",
data: {
"n1": $("#num1").val(),
"n2": $("#num2").val(),
},
success: function (data) {
console.log(data); $("#ret").val(data); }
}) }) // 登录验证
$(".login_btn").click(function () { $.ajax({
url: "/login/",
type: "post",
data: {
"user": $("#user").val(),
"pwd": $("#pwd").val(),
},
success: function (data) {
console.log(data); // json字符串
console.log(typeof data); var data = JSON.parse(data)// 反序列化 object {} console.log(data); // object
console.log(typeof data); if (data.user) {
//location.href = "http://www.baidu.com";
alert("success");
}
else {
$(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})
} } }) }) </script> </body>
</html>
视图代码：
def index(request):
return render(request, "index.html") def test_ajax(request):
print(request.GET) return HttpResponse("hello yuan!") def cal(request):
print(request.POST) n1 = int(request.POST.get("n1"))
n2 = int(request.POST.get("n2"))
ret = n1 + n2
return HttpResponse(ret) from app01.models import User def login(request):
print(request.POST)
user = request.POST.get("user")
pwd = request.POST.get("pwd") user = User.objects.filter(name=user, pwd=pwd).first() res = {"user": None, "msg": None}
if user:
res["user"] = user.name
else:
res["msg"] = "username or passwor wrong! " import json
return HttpResponse(json.dumps(res))
路由：
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
path('test_ajax/', views.test_ajax),
path('cal/', views.cal),
path('login/', views.login),
path('file_put/', views.file_put),
]
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
场景：表单注册
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
基于jquery的Ajax实现
<button class="send_Ajax">send_Ajax</button>
<script> $(".send_Ajax").click(function(){ $.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123},
success:function(data){
console.log(data)
},
error: function (jqXHR, textStatus, err) {
console.log(arguments);
}, complete: function (jqXHR, textStatus) {
console.log(textStatus);
}, statusCode: {
'': function (jqXHR, textStatus, err) {
console.log(arguments);
}, '': function (jqXHR, textStatus, err) {
console.log(arguments);
}
} }) }) </script>
案例
1 用户名是否已被注册
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！
2 基于Ajax进行登录验证
用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。
基于Ajax的文件上传
实例代码：
ajax+form模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head>
<body> <h3>简单的form</h3> <form action="" method="post">
用户名<input type="text" name="user">
密码<input type="password" name="pwd">
<input type="submit">
</form> <h3>基于form表单的文件上传</h3> <form action="" method="post" enctype="multipart/form-data">
用户名<input type="text" name="user">
头像 <input type="file" name="avatar">
<input type="submit">
</form> <h3> 基于Ajax文件上传</h3> <form action="" method="post">
用户名<input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" class="btn" value="Ajax">
</form> <script> {##}
{# $(".btn").click(function(){#}
{##}
{# $.ajax({#}
{# url:"",#}
{# type:"post",#}
{# contentType:"application/json",#}
{# data:JSON.stringify({#}
{# a:1,#}
{# b:2#}
{# }),#}
{# success:function(data){#}
{# console.log(data)#}
{# }#}
{# })#}
{##}
{##}
{##}
{# })#}
{# #} {# $(".btn").click(function(){#}
{##}
{# $.ajax({#}
{# url:"",#}
{# type:"post",#}
{# data:{#}
{# a:1,#}
{# b:2#}
{# },#}
{# success:function(data){#}
{# console.log(data)#}
{# }#}
{# })#}
{##}
{# })#} // ajax上传文件
$(".btn").click(function(){ var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("avatar",$("#avatar")[0].files[0]); $.ajax({
url:"",
type:"post",
contentType:false,
processData:false,
data:formdata,
success:function(data){
console.log(data)
}
})
})
</script> </body>
</html>
视图：
def file_put(request):
if request.method == "POST":
print("body", request.body) # 请求报文中的请求体
print("POST", request.POST) # if contentType==urlencoded ,request.POST才有数据 print(request.FILES)
file_obj = request.FILES.get("avatar")
with open(file_obj.name, "wb") as f:
for line in file_obj:
f.write(line) return HttpResponse("OK") return render(request, "file_put.html") '''
请求首行
请求头
...
ContentType:json #urlencoed
请求体 {"a":"1","b":"2"} #a=1&b=2&c=3 '''
ajax模板
<form>
用户名 <input type="text" id="user">
头像 <input type="file" id="avatar">
<input type="button" id="ajax-submit" value="ajax-submit">
</form> <script> $("#ajax-submit").click(function(){
var formdata=new FormData();
formdata.append("user",$("#user").val());
formdata.append("avatar_img",$("#avatar")[0].files[0]);
$.ajax({ url:"",
type:"post",
data:formdata,
processData: false , // 不处理数据
contentType: false, // 不设置内容类型 success:function(data){
console.log(data)
}
}) }) </script>
视图
def index(request):
if request.is_ajax():
print(request.body) # 原始的请求体数据
print(request.GET) # GET请求数据
print(request.POST) # POST请求数据
print(request.FILES) # 上传的文件数据
return HttpResponse("ok")
return render(request,"index.html")
检查浏览器的请求头：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT
django框架ajax的更多相关文章
- [oldboy-django][1初始django]web框架本质 + django框架 + ajax
web框架本质 浏览器(socket客户端) - 发送请求(ip和端口,url http://www.baidu.com:80/index/) - GET 请求头(数据请求行的url上: Http1. ...
- Django框架----Ajax
一.Ajax准备知识:json 说起json,我们大家都了解,就是python中的json模块,那么json模块具体是什么呢?那我们现在详细的来说明一下 1.json(Javascript Obie ...
- Django框架之Ajax和form组件
一.Django框架之查漏补缺 1)models,字段概况 name = models.CharField(max_length=) age = models.IntegerField() price ...
- Python之Flask和Django框架解决跨域问题，配合附加ajax和fetch等js代码
Flask框架py解决跨域问题示例: # -*- coding: utf- -*- # by zhenghai.zhang from flask import Flask, render_templa ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax.crsf.settings导入 目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...
- Python 之 Django框架（ Cookie和Session、Django中间件、AJAX、Django序列化）
12.4 Cookie和Session 12.41 cookie Cookie具体指的是一段小信息,它是服务器发送出来存储在浏览器上的一组组键值对,下次访问服务器时浏览器会自动携带这些键值对,以便服务 ...
随机推荐
- UI基础:UITextField 分类： iOS学习-UI 2015-07-01 21:07 68人阅读 评论(0) 收藏
UITextField 继承自UIControl,他是在UILabel基础上,对了文本的编辑.可以允许用户输入和编辑文本 UITextField的使用步骤 1.创建控件 UITextField *te ...
- tensorflow中常用学习率更新策略
神经网络训练过程中,根据每batch训练数据前向传播的结果,计算损失函数,再由损失函数根据梯度下降法更新每一个网络参数,在参数更新过程中使用到一个学习率(learning rate),用来定义每次参数 ...
- caffe安装编译问题-ImportError: No module named skimage.io
问题描述 >>> import caffe Traceback (most recent call last): File , in <module> File , in ...
- 取消word中所有超链接
我用的是M-O-W2007,最近做了一个文档,里面很多网上拷下来的图片,很多都有超链接,不想一个一个的取消,请高手帮忙教下有没有措施一次性都取消? 最佳答案: 三种方法,任意选用其中之一: 第一种方法 ...
- 在 Windows 10 中开启移动 WLAN 热点
本文将介绍如何在 Windows 10 中开启移动 Wi-Fi 热点. This post is written in multiple languages. Please select yours: ...
- spring boot 热部署devtools实现
1.devtools spring为开发者提供了一个名为spring-boot-devtools的模块来使Spring Boot应用支持热部署,提高开发者的开发效率,无需手动重启Spring Boot ...
- Mysql隔离级别 sql示例理解
前言 事务要解决的是多线程并发修改数据库的问题.Mysql innodb 引擎支持事务.类似 Java 中的各种锁,例如乐观锁(CAS),读写锁,悲观锁.事务也有很多级别. 每个隔离级别要解决的问题都 ...
- 下载各个版本java （Java Development Kit）
本文介绍怎么样下载各个版本java开发工具包. 方法/步骤 打开官方下载网址:http://www.oracle.com/technetwork/java/javase/downloads/ind ...
- Linux下安装xampp和bugfree
1.BugFree简介 1.1 BugFree的来源 BugFree是借鉴微软的研发流程和Bug管理理念,使用PHP+MySQL独立写出的一个Bug管理系统.简单实用.免费并且开放源代码(遵循GNU ...
- windows7 64位下git和tortoisegit的安装和使用
githttps://github.com/git-for-windows/git/releases tortoisegit安装下载https://tortoisegit.org/download/ ...