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. ionic3 使用swiper插件 实现轮播效果

    由于app的更新迭代 我需要完成新版本设计图的开发 刚开始就遇到一个问题  首页的banner图需要实现某种效果 而ionic3自带的轮播图效果怎么改都改不到我想要的效果 效果图如下  自动播放 不断 ...

  2. union 和 case

    UNION 指令的目的是将两个 SQL 语句的结果合并起来,可以查看你要的查询结果. CASE更多的是一种判断分类,就想其他语言的case一样 1. CASE WHEN 表达式有两种形式 --简单Ca ...

  3. find: paths must precede expression问题及解决

    用find命令查找时 例如命令 会出错,查文档找出 find: paths must precede expression Usage: find [-H] [-L] [-P] [-Olevel] [ ...

  4. centos7 安装php7

    方法一 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm rpm -Uvh https:/ ...

  5. Angular4.0引入第三方框架，eg: bootstrap、jquery

    最近学习angular4.0,在练习是需要使用jquery和bootstrap.但是查阅了,大多数都是angular2的方法,或者是angular4.0的方法但是不准确.花了一些时间终于捣腾出来了,把 ...

  6. 2017《JAVA技术》预备作业2-计科1502-19-何俏依

    Git学习笔记 1.安装git并验证安装成功 2.注册码云账号并配置git 3.创建ssh key并在码云上添加公钥,验证公钥添加成功 添加公钥的过程中,出现了一些问题,未找到文件,经过老师的指点,仔 ...

  7. HDU 2062：Subset sequence（思维）

    Subset sequence Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  8. macbook 下 spark开发环境搭建（基于idea 和maven）及spark单机写运行jar

    参见链接 https://blog.csdn.net/u012373815/article/details/53266301 运行jar包: 将写好的项目打成jar,上传到服务器,进入SPARK_HO ...

  9. Java+opencv实现人脸检测

    版本 Java1.8 opencv3.4 代码: import java.awt.Graphics; import java.awt.image.BufferedImage; import javax ...

  10. Cache架构设计

    Cache策略 定时过期策略 定时过期的好处是Cache节点的个数符合实际需求,不会造成资源滥用和服务器压力 定时过期适合访问量较大,实时性要求不高的情况 如果访问量小,定时过期会造成Cache命中率 ...