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. ubuntu 升级 python3.5到 python3.6

    首先是在Ubuntu中安装python3.6 sudo apt-get install software-properties-common sudo add-apt-repository ppa:j ...

  2. 我在MySQL免安装版使用过程中遇到的问题记录

    我的MySQL版本为:mysql-5.7.16-winx64 安装时间为:2016年5月10号 由于是免安装版,下载好压缩文件之后解压到特定目录下,再打开命令行运行几行命令即可. 在一次操作中,发现无 ...

  3. 在Power BI报表和仪表板中显示刷新日期\时间

    有人最近问我:“如何在报告和仪表板中显示最后刷新数据的日期和时间?”这里有两个简单的技巧在这分享下,也许可以帮助到你. 显示上次刷新日期\时间 要想显示刷新的日期和时间,我们需要在模型本身中存储时间刷 ...

  4. Js/如何操作div下面的span元素或者是img之类的标签元素

    $("div[name='MatTypeName']").click(function (e) { $("div[name='MatTypeName']").e ...

  5. GoogLeNet 改进之 Inception-v2/v3 解读

    博主在前一篇博客中介绍了GoogLeNet 之 Inception-v1 解读中的结构和思想.Inception的计算成本也远低于VGGNet.然而,Inception架构的复杂性使得更难以对网络进行 ...

  6. linux command 4

    #环境变量扩展 echo $PATH #算数表达式 echo $((3*5)) #参数扩展 echo ls *pdf #"" echo "$PATH $(cal)&quo ...

  7. jQuery-2.DOM---节点插入

    DOM内部插入append()与appendTo() 动态创建的元素是不够的,它只是临时存放在内存中,最终我们需要放到页面文档并呈现出来.那么问题来了,怎么放到文档上? 这里就涉及到一个位置关系,常见 ...

  8. 【Java】字符串工具类

    import android.annotation.SuppressLint; import java.io.UnsupportedEncodingException; import java.uti ...

  9. Gym101889B. Buggy ICPC（打表）

    比赛链接:传送门 题目: Problem B – Buggy ICPC Author : Gabriel Poesia, Brasil Alan Curing is a famous sports p ...

  10. 启动Kernel提示Bad Data CRC

    如上图,我明明将uImage正确写入到里nandflash里面,但启动但时候就是提示bad CRC. 后来我手动执行nand read kernel想看看是不是环境变量里面的命令执行有问题,意外但被我 ...