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. Mysql 5.7.28离线包下载与配置

    下载链接:https://pan.baidu.com/s/1uPbBknyIebQRDt4k_RA58Q   提取码:14zi 将下载文件进行解压,我解压位置为:D:\Program Files\my ...

  2. Mac OS X 快速添加新文件

    本文为 automator (中文名为 自动操作)的练习之作,尚有许多不足. 如果你想在 OS X 系统中快速添加新文件可直接参考此文 简介 本文使用 automator 创建了一个应用程序 auto ...

  3. 【.net core 入坑】.net core 3.0 报错：在 FETCH 语句中选项 NEXT 的用法无效

    目录 1.事故现场: 2.分析及解决方案: 1.事故现场: 在项目中使用.net core 3.0,在EF链接sqlserver2008,在程序中使用了分页用的skip和take,程序报错: 在 FE ...

  4. vue项目 npm run dev在Linux 持久运行

    touch run.dev.logchmod u+w run.dev.log 记录日志文件 nohup npm run dev > run.dev.log 2>run.dev.log &a ...

  5. mysql-两种方式安装

    一.数据库版本 MySQL 常见版本 MySQL Community Server 社区版本,开源免费,但不提供官方技术支持. MySQL Enterprise Edition 企业版本,需付费,可以 ...

  6. 流式计算（二）-Kafka Stream

    前面说了Java8的流,这里还说流处理,既然是流,比如水流车流,肯定得有流的源头,源可以有多种,可以自建,也可以从应用端获取,今天就拿非常经典的Kafka做源头来说事,比如要来一套应用日志实时分析框架 ...

  7. [追热点]Rust学习资源整理

    为什么选择Rust 在一次演讲中,谈到微软为解决相应内存问题所做的工作,微软研究人员 Matthew Parkinson 提到了微软正在开发的基于 Rust 的新编程语言 Verona. 摘自:[Ru ...

  8. Python 标准类库-数字和数学模块之decimal使用简介

    标准类库-数字和数学模块之decimal使用简介 by:授客 QQ:1033553122 例子 >>>from decimal import * >>>getcon ...

  9. vuex 精简demo解析

    1.store/index.js 文件 import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex); //一个store ...

  10. SQL server 安装成功到使用Sa SQL server验证登录等一系列问题

    使用 Windows 身份验证方式登录 出现错误 无法连接到 本地服务器 解决问题: SQL server配置管理器:服务远程过程调用失败 https://blog.csdn.net/gfjjggg/ ...