1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式"

ajax与form表单的区别在于: form 是整个页面刷新提交的,  但是ajax 是局部提交 局部验证的, 这个是他们的唯一区别

2. 前端ajax请求方式:

$.ajax({

    url: '/ajax/',  # 请求路径

    type: 'post',  # 请求方式

    data: {  # get和post都以data字典方式携带数据

        usr: $('.usr').val(),  # 获取输入框内容

        pwd: $('.pwd').val(),

    },

    success: function (data) {

        console.log(typeof(data), data);  # 得到后台返回的数据（普通字符串 | json类型数据）

    }

})

ajax发送的请求方式

3. 后端接受ajax请求的相应方式:

    from django.http import JsonResponse

    # 返回json类型数据的终极方法

    dic = {'status': 'ok', 'msg': '登录成功'}

    return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})  # *****

    # 参数含义：

    # 返回值保证是字典类型

    # safe在False情况下就支持返回列表或字符串

    # 取消json的dumps方法采用的默认ascii编码中文

后端代码使用JsonResponse

def ajax(request):

    print(request.is_ajax())

    if request.method == 'GET':

        usr = request.GET.get('usr', None)

        pwd = request.GET.get('pwd', None)

        print('get>>>', usr, pwd)

        msg = request.GET.get('msg', None)

        print('get>>>', msg)

    if request.method == 'POST':

        usr = request.POST.get('usr', None)

        pwd = request.POST.get('pwd', None)

        print('post>>>', usr, pwd)

        msg = request.GET.get('msg', None)

        print('post>>>', msg)

    # ajax请求，后台只需要返回信息，所以不会出现render、redirect

    # 1、返回字符串类型数据

    # return HttpResponse('OK')

    # 2、返回json类型数据

    # dic = {'status': 'ok', 'msg': '登录成功'}

    # data = json.dumps(dic, ensure_ascii=False)

    # 直接返回json模块处理后的json数据(json字符串)，前台接收到的是一个json类型的字符串

    # return HttpResponse(data)

    # 返回json字符串是，还告诉前台，该数据就是json类型字符串

    # return HttpResponse(data, content_type='application/json')

    # 3、直接通过JsonResponse返回json数据

    dic = {'status': 'ok', 'msg': '登录成功'}

    # 返回值保证是字典类型

    # safe在False情况下就支持返回列表或字符串

    # 取消json的dumps方法采用的默认ascii编码中文

    return JsonResponse(dic, safe=False, json_dumps_params={'ensure_ascii': False})

后端得到ajax请求的案例

前端

<body>

{# form表单提交数据：form提交数据后，一定会发生页面的跳转 #}

{# ajax提交数据：只向后台请求数据，请求的过程是异步的，请求成功后有一个回调函数，携带后台返回的数据 #}

<form action="/form/" method="post">

    <input class="usr" type="text" name="usr">

    <input class="pwd" type="password" name="pwd">

    <input class="ajax-submit" type="button" value="登录">

    <input class="ajax-submit_bac" type="button" value="了解">

</form>

</body>

form表单的简单发送请求

<script>

    $('.ajax-submit').click(function () {

        {#window.alert(123)#}

        {#window.document.getElementById()#}

        {#window.location.href = 'https://www.baidu.com'#}

        $.ajax({

            {#注：url中可以拼接请求数据，get|post方式在后台都通过GET对象获取该数据#}

            url: '/ajax/?msg=qwer',

            type: 'post',

            data: {

                usr: $('.usr').val(),

                pwd: $('.pwd')[0].value,

            },

            {#ajax发生get|post请求，用data携带数据#}

            success: function (data) {

                {#返回值为普通字符串#}

                {#console.log(">>>>", data);#}

                {#alert(data);#}

                {#window.location.href = data#}

                {#返回值为json类型数据#}

                console.log(typeof(data), data);

                {#前台如何处理json类型字符串#}

                {#data = JSON.parse(data);#}

                {#console.log(typeof(data), data, data.msg);#}

            },

            error: function (e) {

            }

        })

    })

    $('.ajax-submit_bac').click(function () {

        {#jsonStr = '{"name": "Bob"}';#}

        dic = {

            name: 'HOU'

        };

        jsonStr = JSON.stringify(dic);

        $.ajax({

            url: '/ajax-bac/',

            type: 'post',

                {# dataType: 'json',  了解：告诉jq，一定按json类型数据解析（默认后台返回的一定是json类型数据, 如果不是就拿不到结果） #}

            {# 前台主动传入json类型的字符串, 后台需要手动处理body（前台json数据类型还不能错） #}

            contentType: 'application/json',

            data: jsonStr,

            success: function (data) {

                console.log(typeof(data), data);

            },

            error: function (e) {

                console.log(e)

            }

        })

    })

</script>

ajax发送请求的案例

Django之前后端交互使用ajax的方式的更多相关文章

  1. 一、Django前后端交互之Ajax和跨域问题

    一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...

  2. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  3. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...

  4. Django 前后端数据传输、ajax、分页器

    返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax ​ 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...

  5. Django前后端交互&数据验证

    一.前端--->后端 1.form表单 <form method="post" action="/test/?a=1&b=2"> {% ...

  6. 前端ajax的各种与后端交互的姿势

    前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...

  7. Vue之前后端交互

    Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...

  8. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

  9. ajax与python后端交互

    目录 ajax简介 前后端传输数据编码格式 ajax发送json格式数据 ajax携带文件数据 回调机制处理策略 ajax简介 ajax可以在页面不刷新的情况下可以与后端进行数据交互,异步提交,局部刷 ...

随机推荐

  1. 一般xcode报错

    下面这图报找不到FMDtabaseQueue,其实是把文件拖入xcode的时候xcode没有把.m文件添加进工程路径 解决办法:build phases-> compile sources &q ...

  2. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  3. centos7共享文件夹到windows访问--samba

    第一步:安装samba服务 yum install samba 第二步:启动samba服务 systemctl start smb 查看samba的状态 systemctl status smb 看到 ...

  4. 使用css时的一些技巧及注意事项

    <!-- TITLE: 使用css时的一些技巧及注意事项 --> # CSS推荐书写顺序: 1. 位置属性(position, top, right, z-index, display, ...

  5. 6.移动端App安装包的测试用例

    安装 安装手册是否规范,是否简洁,是否通俗易懂. 安装手册是否齐全,正确,有改动时,文档是否同步更新 直接复制安装程序到电脑上,能否正常安装 按安装手册给出的步骤进行安装,安装是否正确 查看在安装过程 ...

  6. 自由线程FreeThreadDOMDocument

    Posted on 2006年09月4日by 不及格的程序员-八神 星期二 天气:晴   昨天燕子 自己去五爱了 给我买了一堆袜子 给妈买了一双鞋 给自己买了一件 红色的内衣服 挺好看的 在市场买了一 ...

  7. day05 集合

    今日进度(数据类型) 集合 内存相关 深浅拷贝 1.集合表示 1.无序 2.不重复 3.hash查找 #问题:v={}表示? set: v1=set()#空集合 v1={1,2,3,4,5} dict ...

  8. Web服务器之Nginx详解（理论部分）

    大纲 一.前言 二.Web服务器提供服务的方式 三.多进程.多线程.异步模式的对比 四.Web 服务请求过程 五.Linux I/O 模型 六.Linux I/O 模型具体说明 七.Linux I/O ...

  9. Django请求流程图

    Django请求流程图

  10. （拼接SQL语句）mysql中date类型，datetime类型

    : , . _ - /  %  &  # @ ! * | [ ] { }   ;  + = update ky set date = '18,9-2'  where id  = 1  // 2 ...