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. groupmod语法

    语法 groupmod [-g <群组识别码> <-o>][-n <新群组名称>][群组名称] 参数: -g <群组识别码> 设置欲使用的群组识别码. ...

  2. SpringBoot（三）thymeleaf+JPA+MySql

    接着上一节的 第一步:在pom文件中加入以下代码: <!--JPA--> <dependency> <groupId>org.springframework.boo ...

  3. 莫烦tensorflow(7)-mnist

    import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data#number 1 to 10 dat ...

  4. 自动化测试-4.selenium的xpath定位

    前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...

  5. 深入理解Java中的synchronized锁重入

    问题导入:如果一个线程调用了一个对象的同步方法,那么他还能不能在调用这个对象的另外一个同步方法呢? 这里就是synchronized锁重入问题. 一.synchronized锁重入 来看下面的代码: ...

  6. less的入门教程

    CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向. 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫 ...

  7. zombodb 索引创建

      索引的创建是zombodb 的核心,我们都是需要先创建table,然后创建索引,创建的时候我们可以指定es 集群的地址,同时可能需要使用 一些地址api(比如数据直接存储在es 中而不是pg 中) ...

  8. listagg乱码问题

    listagg(to_char(ts.tsmc),',') within GROUP (order by  xs.xh) ,先将字段to_char 以后,就可以解决

  9. Docker之 默认桥接网络与自定义桥接网卡

    docker引擎会默认创建一个docker0网桥,它在内核层连通了其他的物理或虚拟网卡,这就将所有容器和宿主机都放到同一个二层网络. 1. docker如何使用网桥 1.1 Linux虚拟网桥的特点 ...

  10. [转]boost::python开发环境搭建

    转自:http://www.cnblogs.com/gaoxing/p/4317051.html 本来想用mingw编译boost::python模块,网上看了下资料太少,只有使用vs2012 操作环 ...