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. Visual Studio Code--开发大大们都在用的编辑器

    老公推荐的炒鸡nb的编辑器...说让我看起来像个假大神(微笑脸) 如何用VSCode练习python呢,还有VSCode有哪些常用的功能和快捷键呢?我会持续更新中... 1. 先来换个喜欢的颜色主题吧 ...

  2. Java学习笔记40（sql：将数据库内数据存入对象中）

    新建一个数据表: use qy97; create table student( id int primary key auto_increment, sname ), gander ), age i ...

  3. 剑指Offer 37. 数字在排序数组中出现的次数 （数组）

    题目描述 统计一个数字在排序数组中出现的次数. 题目地址 https://www.nowcoder.com/practice/70610bf967994b22bb1c26f9ae901fa2?tpId ...

  4. windows10 vs2017 C++连接MySQL

    安装mysql8.0 x64 创建test数据库,user表,插入数据如下: +----+------+----------+-----------------+ | id | name | pass ...

  5. Flink实战(1) - Apache Flink安装和示例程序的执行

    在Windows上安装 从官方网站下载需要的二进制包 比如我下载的是flink-1.2.0-bin-hadoop2-scala_2.10.tgz,解压后进入bin目录 可以执行bat文件,也可以使用c ...

  6. 【leetcode】455. Assign Cookies

    problem 455. Assign Cookies solution1: But, you should give each child at most one cookie. 对小朋友的满意程度 ...

  7. jquery移除元素时会自动解绑事件

    .html() When .html() is used to set an element's content, any content that was in that element is co ...

  8. Python3之set, frozenset记录

    set1 = set([1, 2, 3, 4]) set2 = frozenset([1, 2, 3, 4]) print(set1, set2, sep='|||') set1.add(" ...

  9. uboot下读取flash，上传tftp服务器、下载

    上传 setenv gatewayip 192.168.1.1; setenv serverip 192.168.1.7; setenv ipaddr 192.168.1.156 ; mw.b 0x8 ...

  10. 我发起并创立了一个 .Net 平台上的 Web 业务系统 基础库 开源项目 WebEasy

    我 强调一点, 程序员 应该对 程序 有 控制感 . 过多的 控制反转 使 程序员 丧失了 对 程序 的 控制感 . 过多的 依赖注入 束缚了 程序员 的 创造力 . 过度复杂的 架构设计 束缚了 程 ...