form表单提交与ajax消息传递
form表单提交与ajax消息传递
1.前后端传输数据编码格式contentType:
urlencoded
对应的数据格式:name=xxx&password=666
后端获取数据:request.POST
ps；django会将urlencoded编码的数据解析自动放到request.POST
formdata
form表单传输文件的编码格式
后端获取文件格式数据:request.FILES
后端获取普通键值对数据:request.POST
application/json
ajax发送json格式数据
需要注意的点
编码与数据格式要一致
2.form表单与ajax异同点:
(1) form表单不支持异步提交局部刷新
(2) form表单不支持传输json格式数据
(3) form表单与ajax默认传输数据的编码格式都是urlencoded
3.ajax传普通数据
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
{#<input type="file" name="myfile" id="i1">#}
<button id="d1">提交~</button>
<script>
$('#d1').click(function () {
$.ajax({
// 提交的地址
url:'/index/',
// 提交的方式
type:'post',
// 提交的数据
data:{'name':'sean','password':'123'},
// 回调函数
success:function (data) { // data接收的就是异步提交返回的结果
alert(data)
}
})
})
</script>
4.ajax传文件数据
<script>
$('#d1').click(function () {
var formdata = new FormData();
// FormData对象不仅仅可以传文件还可以传普通的键值对
formdata.append('name','owen');
// 获取input框存放的文件
//$('#i1')[0]由Jquery对象变为js对象
formdata.append('myfile',$('#i1')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:formdata,
// ajax发送文件需要修改两个固定的参数
processData:false, // 告诉浏览器不要处理我的数据
contentType:false, // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
// 回调函数
success:function (data) {
alert(data)
}
})
})
</script>
5.ajax传json数据:
<script>
$('#d1').click(function () {
$.ajax({
url:'', // url参数可以不写，默认就是当前页面打开的地址
type:'post',
contentType:'application/json',
data:JSON.stringify({'name':'nick','hobby':'study'}),
success:function (data) {
alert(data)
}
})
})
</script>
后台:
import json
from django.http import JsonResponse
def ajax_json(request):
if request.method == 'POST':
print(request.body) # json格式只有通过request.body才能查看
res = json.loads(request.body.decode('utf-8'))
hobby = res.get('hobby')
return HttpResponse('OK') # 必须返回HttpResponse对象
return render(request, 'ajax_json.html')
6.form表单
<h1>form_up</h1>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="username">
<input type="file" name="my_file">
<input type="submit">
</form>
后台:
def index(request):
if request.method == 'POST':
print(request.POST) # 普通的键值对:<QueryDict: {'name': ['xxx']}>
print(request.body)
#print(request.FILES)
#传文件< MultiValueDict: {'myfile': [ < InMemoryUploadedFile: day17课件.md(application / octet - stream) >]} >
return HttpResponse('OK')
return render(request, 'index.html')
七Django默认有七个中间件
Django默认有七个中间件，但是django暴露给用户可以自定义中间件并且里面可以写五种方法
中间件可以定义五个方法，分别是：（主要的是process_request和process_response）
有response需要加上return
process_request(self,request)
process_response(self, request, response)
process_view(self, request, view_func, view_args, view_kwargs)
process_template_response(self,request,response)
process_exception(self, request, exception)
'mymiddleware.middleware.MyMiddleWare1'
from django.utils.deprecation import MiddlewareMixin
class MyMiddleWare(MiddlewareMixin):
def process_request(self,request):
print('我是第一个自定义的中间件中process_request方法')
def process_response(self,request,response):
print('我是第一个自定义的中间件中process_response方法')
return response
拷贝方法:
import copy
params = copy.deepcopy(request.POST)
params["firstname"] = "zhao"
print(params)
request.POST = params
#可利用深拷贝在POST中手动添加键值对
#https://www.cnblogs.com/zgf-666/p/9161910.html
中间件代码:
from django.utils.deprecation import MiddlewareMixin
import json
class MyMiddleWare(MiddlewareMixin):
def process_request(self,request):
print('我是第一个自定义的中间件中process_request方法')
import copy
params = copy.deepcopy(request.POST)
# params["firstname"] = "zhao"
# print(params)
# request.POST = params
if not request.POST:
if request.body:
# < QueryDict: {'username': ['dasdas']} >
res = json.loads(request.body.decode('utf-8'))
print(res,type(res))
for k,v in res.items():
params[k] = v
request.POST = params
# print(request.POST)
def process_response(self,request,response):
print('我是第一个自定义的中间件中process_response方法')
return response
form表单提交与ajax消息传递的更多相关文章
- Form表单提交，Ajax请求，$http请求的区别
做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...
- form表单提交转为ajax方式提交
<form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...
- form表单提交和ajax表单提交，关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
- form表单提交和ajax提交的区别
form表单是整个页面跳到服务器的地址然后提交数据: ajax是往这个地址post数据 <form style="padding:0px;margin:0px;" targe ...
- form表单提交和ajax提交优先级
form中若定义action,那么,ajax将不能执行.form默认提交的请求优先级高于ajax
- 使用form表单提交请求如何获取后台返回的数据？
问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- ajax form表单提交 input file中的文件
ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
随机推荐
- 《Java基础知识》Java super关键字
super可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类. super也有三种用法: 1.普通的直接引用 与this类似,super相当于是指向当前对象的父类,这样 ...
- 聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数？
聊一聊 Vue 中 watch 对象中的回调函数为什么不能是箭头函数 本文重点知识点速览: Vue 中的 watch 对象中的回调函数不能是箭头函数. 箭头函数中的 this 指向的是函数定义时所在的 ...
- 新手如何快速入门node.js
附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全: 书单导航页(点击右侧 极客侠栈 即可打开个人博客):极客侠栈 ①[Java]学习之路吐血整理技术书 ...
- Jenkins+GitLab+Sonarqube+Shell持续集成CI/CD
1.部署GitLab 2.部署Jenkins 3.Sonar代码审计 4.参数化构建 5.git参数化构建
- Centos6.5 Intel X722 编译安装网卡驱动
1,编译环境准备,安装好kernel-devl ,kenel-headers等; 注意: 一定要注意kernel 的内核,一定要保持被安装的机器与编译的内核保持一致; 下载驱动地址:https://d ...
- vue中点击屏幕其他区域关闭自定义div弹出框
直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...
- LINUX OS 正常关机失败
描述:LINUX OS运行命令shutdown now显示:Telling INIT to go to single user mode.... 解决方法:运行命令exit重新登录,再运行 hal ...
- 实战Netty集群
疯狂创客圈 Java 分布式聊天室[ 亿级流量]实战系列之 -25[ 博客园 总入口 ] 1.写在前面 1.1 实战Netty集群的理由 Java基础练习中,一个重要的实战练习是: java的聊天程序 ...
- python3读取图像并可视化的方法（PIL/Pillow、opencv/cv2）
原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...
- 教程视频、项目源码、全部干货【微信小程序、React Native、Java、iOS、数据结构】
把我收藏多年的教学视频.项目源码分享给大家,大神就可以忽略了,很多东西都是基础性的,都是期初学习阶段收集的东西. 微信小程序(入门级,有web前端基础的人群): 链接: https://pan.bai ...