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消息传递的更多相关文章

  1. Form表单提交，Ajax请求，$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  2. form表单提交转为ajax方式提交

    <form action="xxx" method="get"> //action的值是请求的url地址 <div class="f ...

  3. form表单提交和ajax表单提交，关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

    [文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...

  4. form表单提交和ajax提交的区别

    form表单是整个页面跳到服务器的地址然后提交数据: ajax是往这个地址post数据 <form style="padding:0px;margin:0px;" targe ...

  5. form表单提交和ajax提交优先级

    form中若定义action,那么,ajax将不能执行.form默认提交的请求优先级高于ajax

  6. 使用form表单提交请求如何获取后台返回的数据？

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  7. Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式

    //1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...

  8. ajax form表单提交 input file中的文件

    ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了 ...

  9. python中前后端通信方法Ajax和ORM映射（form表单提交）

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

随机推荐

  1. 《Java基础知识》Java变量的声明、初始化和作用域

    一.Java变量的声明 在 Java 程序设计中,每个声明的变量都必须分配一个类型.声明一个变量时,应该先声明变量的类型,随后再声明变量的名字.下面演示了变量的声明方式. double salary; ...

  2. 【CHRIS RICHARDSON 微服务系列】事件驱动的数据管理-5

    编者的话 |本文来自 Nginx 官方博客,是「Chris Richardson 微服务」系列的第五篇文章.第一篇文章介绍了微服务架构模式,并且讨论了使用微服务的优缺点:第二和第三篇描述了微服务架构模 ...

  3. JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置

    动画函数封装:设置任意的一个元素,移动到指定的目标位置 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. JS---BOM基本知识 (顶级对象，系统对话框，加载事件，location对象, history对象, navigator对象)

    BOM JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM ...

  5. inux 网络监控分析

    一.sar -n:查看网卡流量 -n 参数,他有6个不同的开关:DEV | EDEV | NFS | NFSD | SOCK | ALL .DEV显示网络接口信息,EDEV显示关于网络错误的统计数据, ...

  6. ConcurrentHashMap源码走读

    目录 ConcurrentHashMap源码走读 简介 放入数据 容器元素总数更新 容器扩容 协助扩容 遍历 ConcurrentHashMap源码走读 简介 在从JDK8开始,为了提高并发度,Con ...

  7. js 从两道面试题加深理解闭包与箭头函数中的this

     壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...

  8. JS中遍历对象属性的四种方法

    Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...

  9. 老版本nginx存在安全漏洞，不停服务热升级

    1.场景描述 安全部通知:nginx存在"整数溢出漏洞",经测试2017年4月21日之后的版本无问题,将openresty升级到最新版本,Nginx升级到1.13.2之后的版本. ...

  10. C语言笔记 03_常量&存储类

    常量 常量是固定值,在程序执行期间不会改变.这些固定的值,又叫做字面量. 常量可以是任何的基本数据类型,比如整数常量.浮点常量.字符常量,或字符串字面值,也有枚举常量. 整数常量 整数常量可以是十进制 ...