form表單提交與ajax消息傳遞

時間 2019-11-07

標籤 form 表單提交 ajax 消息傳遞欄目 HTML 简体版

原文原文鏈接

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>

後臺:css

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')html

七Django默認有七個中間件

Django默認有七個中間件，可是django暴露給用戶能夠自定義中間件而且裏面能夠寫五種方法jquery

中間件能夠定義五個方法，分別是：（主要的是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