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 final关键字：阻止继承和多态

    在 Java 中,声明类.变量和方法时,可使用关键字 final 来修饰.final 所修饰的数据具有“终态”的特征,表示“最终的”意思.具体规定如下: final 修饰的类不能被继承. final ...

  2. 《Dotnet9》系列-开源C# WPF控件库1《MaterialDesignInXAML》强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  3. GHOST CMS - 配置 Config

    Config For self-hosted Ghost users, a custom configuration file can be used to override Ghost's defa ...

  4. 常见的 由于未调整服务器 ulimit 而引起的内存溢出问题

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/e3bb62c9-9 ...

  5. Python活力练习Day5

    Day5:连续输入n个字符串,请按照长度为8拆分每个字符串后输出到新的字符串组:长度不是8的整数倍的字符串请在后面补数字0,其中,空字符串不做处理. eg : input :   2    12345 ...

  6. C语言笔记 08_函数指针&回调函数&字符串&结构体&位域

    函数指针 函数指针是指向函数的指针变量. 通常我们说的指针变量是指向一个整型.字符型或数组等变量,而函数指针是指向函数. 函数指针可以像一般函数一样,用于调用函数.传递参数. 函数指针变量的声明: / ...

  7. 开源Odoo13更新的模块功能信息（译文）

    本文来源江苏欧度软件:www.odooyun.com 本次Odoo13已于10月初发布,更新的模块有:Odoo会计模块.Odoo活动项目模块.Odoo13审批模块.Odoo评价.客户关系管理(CRM) ...

  8. ZKWeb 官网与演示站点的部署步骤 (Linux + Nginx + Certbot)

    因为没有给域名续费,加上私人时间不足,ZKWeb 的官网和演示站点已经停止了几个月的时间. 最近时间开始变多,所以重新购买了别的域名和服务器把官网和演示站点重新部署上去. 在此前站点是托管在共享主机上 ...

  9. nginx将http升级到https并且同时支持http和https两种请求、http自动转向https

    1.http升级到https 1.1.检查 Nginx 是否支持 SSL /usr/local/nginx/sbin/nginx -V configure arguments中是否有--with-ht ...

  10. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...