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. LeetCode刷题总结-排序、并查集和图篇

    本文介绍LeetCode上有关排序.并查集和图的算法题,推荐刷题总数为15道.具体考点分析如下图: 一.排序 1.数组问题 题号:164. 最大间距,难度困难 题号:324. 摆动排序 II,难度中等 ...

  2. docker 常用命令 以及常见问题

    常见命令 windos 在搜索框 输入 windows powershell,打开.然后输入以下命令#查看镜像列表 docker images ls #删除单个镜像 docker rmi image- ...

  3. C#中怎样获取默认配置文件App.config中配置的键值对内容

    场景 在新建一个程序后,项目中会有一个默认配置文件App.config 一般会将一些配置文件信息,比如连接数据库的字符串等信息存在此配置文件中. 怎样在代码中获取自己配置的键值对信息. 注: 博客主页 ...

  4. Python学习之编码

    Python2默认解释器的编码:ascii: Python3默认解释器的编码:UTF-8 ascii码:只会识别英文字母.数字和标点.8位表示一个英文字符,1个字节 万国码Uicode:目前的所有语言 ...

  5. HtEditor使用总结

    最近在公司学习到ht编辑器的使用,关于使用方法上总结了一下,避免入坑.ht是做大屏数据可视化比较好的一款软件,不过多介绍,官网上有具体使用方法和展示样例,这里我整理一下我用的最多的功能. ##1.如何 ...

  6. Supermap/Cesium 开发心得----本地视频接入播放

    在三维中,为了增加现实感.给人一种带入感,我们会采取接入视频的方式来实现,那么如何接入视频呢? 由于没有截至写文章为止,我没有视频流数据,所以只能采取本地视频文件的方式来做. 本文介绍结束视频的其中一 ...

  7. Android 菜单 使用XML

    @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to th ...

  8. 面试连环炮系列（五）：你们的项目为什么要用RabbitMQ

    你们的项目为什么要用RabbitMQ? 消息队列的作用是系统解耦.同步改异步.请求消峰,举个下订单的例子: 前端获取用户订单信息,请求后端的订单创建接口.这个接口并不直接请求订单服务,而是首先生成唯一 ...

  9. Xposed反射字段流程分析

    在XposedBridge源码中,反射字段的方法封装在de.robv.android.xposed.XposedHelpers类里面.下面来看看Xposed是如何获取和设置字段的值的 获取字段的值 获 ...

  10. SpringAOP基础

    例1.已知有这么一段代码,会打印出Hello public static void main(String[] args) { sayHello(); } public static void say ...