ajax简介

ajax可以在页面不刷新的情况下可以与后端进行数据交互，异步提交，局部刷新。

比如百度的注册页面，我并没有点击提交它就提醒我用户已存在了。

ajax不是一门全新知识，本质就是一些js代码，我们学习ajax直接使用jQuery封装之后的版本(语法更加简单)，使用ajax的前提必须要引入jQuery文件。

使用

前端中，ajax里的请求携带的数据一般用字典类型，便于后端接收并使用。

$.ajax({

    url:'',  // 页面请求地址，不写就是当前地址

    type:'post',  // 请求方式，不写默认为get请求

    data:{'data':'data'},  // 请求携带的数据

    success:function (args) {  // 异步回调函数，后端有回复时触发，args接收后端传来的数据

	}

})

后端使用request.is_ajax()判断是否是ajax请求，并要使用Httpresponse返回给ajax异步回调函数中的形参。

def index(request):

    if request.is_ajax():  # 判断是否是ajax请求

        return Httpresponse('返回给ajax的数据')

    return render(request, 'index.html')

案例

让输入框后面来一段内容可以跟着输入框实时变化。

前端

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

    <p>用户名<input id="username" type="text"><span id="name" style="color:red;"></span></p>

    <script>

        $('#username').on('input', function () {

            let data = $(this).val()

            $.ajax({

                url: '',

                type: 'post',

                data: {'username':data},

                success: function (args) {

                    $('#name').text(args)

                }

            })

        })

    </script>

</body>

</html>

后端：

def index(request):

    if request.is_ajax():  # 判断是否是ajax请求

        if request.method == 'POST':

            data = request.POST

            return HttpResponse(data.get('username'))

    return render(request, 'index.html')

前后端传输数据编码格式

前端传输数据编码格式可以从按F12查看网络请求。

form表单默认发送的编码格式

Content-Type：application/x-www-form-urlencoded。

数据格式举例：username=jason&password=123。

django后端会自动处理到request.POST接收。

form表单发送文件

Content-Type：multipart/form-data。

数据格式：隐藏不让看。

django后端会自动处理：request.POST接收其他，request.FILES接收文件信息。

ajax默认的编码格式

Content-Type：application/x-www-form-urlencoded。

数据格式举例：username=jason&password=123。

django后端会自动处理到request.POST接收。

ajax发送json格式数据

Content-Type：application/json

数据格式举例：username=jason&password=123。

django后端只会用request.body接收。

ajax发送json格式数据

ajax发送的数据类型一定要跟数据的编码格式一致，如果想要发送json格式数据就需要用到json数据的编码格式application/json。

$.ajax({

    url: '',

    type: 'post',

    contentType: 'application/json',  // 不写,默认是urlencoded编码

    data: JSON.stringify({'name': 'tom'}),  // 序列化方法

    success: function (args) {

    }

})

后端只能用request.body接收，接收还需要反序列化。

def index(request):

    if request.is_ajax():

        if request.method == 'POST':

            import json

            res = json.loads(request.body)  # 反序列化

            print(res)

            return HttpResponse('666')

    return render(request, 'index.html')

ajax携带文件数据

ajax如果想要把文件传给后端，需要利用js内置对象FormData，并且ajax需要额外指定两个参数。

前端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

</head>

<body>

<input id="file" type="file">

<button id="btn">提交</button>

<script>

    $('#btn').click(function () {

        let myFormData = new FormData()

        // 对象添加文件数据

        myFormData.append('my_file', $('#file')[0].files[0])

        $.ajax({

            url: '',

            type: 'post',

            // 携带文件必须要指定的两个参数

            contentType: false,

            processData: false,

            data: myFormData,

            success: function (args) {

            }

        })

    })

</script>

</body>

</html>

后端要用request.FILES获取

def index(request):

    if request.is_ajax():

        if request.method == 'POST':

            # 获取文件信息

            print(request.FILES.get('my_file'))

    return render(request, 'index.html')

回调机制处理策略

如果使用python视图函数种其他的返回方法，比如render()、redirect()、JsonResponse()，ajax同样可以接收到。

render()和redirect()返回的是一个页面，ajax接收的数据是网页的原生代码。

JsonResponse()返回的是一个json格式数据，ajax会自动反序列化并接收。

ajax与python后端交互的更多相关文章

  1. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

  2. struts2、ajax实现前后端交互

    跳过struts2环境搭建部分,或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html),里面有写,很详细. 需要导入的jar包(struts官 ...

  3. Python 利用三个简易模块熟悉前后端交互流程

    准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...

  4. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  5. Django之前后端交互使用ajax的方式

    1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式" ajax与form表单的区别在于: form 是整个页面刷新提交的,  但是ajax ...

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

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

  7. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

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

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

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

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

随机推荐

  1. C++中初始化列表的使用（总结）

    原文链接 https://www.cnblogs.com/dishengAndziyu/p/10906081.html 参考链接:https://www.cnblogs.com/laiqun/p/57 ...

  2. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  3. Wepy-小程序踩坑记

    引言 用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的,因此朋友推荐的wepy我就入坑鸟...这么一个跟vue的开发方式类似的框架,不过说起来跟vue类 ...

  4. 让子弹飞，零成本让你的网站更快一点，boxopened http/3 (QUIC) 协议实战

    最近HTTP-over-QUIC 协议被正式命名为 HTTP/3,协议带来的最大改变是协议底层将采用UDP协议,而不再是TCP协议,这样的好处吗,就是更低时延,更好的拥塞控制,更精确的RTT时间,更高 ...

  5. java中如何使用接口继承（Extending Interfaces）

    5.接口继承(Extending Interfaces)和通话talk的功能.而Moto888更为高级,除了照相和通话功能以外,还有mp3的功能.接口继承到底有什么意义呢?马克-to-win:1)通过 ...

  6. Blazor组件自做五 : 使用JS隔离封装Google地图

    Blazor组件自做五: 使用JS隔离封装Google地图 运行截图 演示地址 正式开始 1. 谷歌地图API 谷歌开发文档 开始学习 Maps JavaScript API 的最简单方法是查看一个简 ...

  7. 得到一个a(10)到b(20)的随机数。包括10和20

  8. Java语言学习day39--8月14日

    今日内容介绍1.Map接口2.模拟斗地主洗牌发牌 ###01Map集合概述 A:Map集合概述: 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形 ...

  9. Python schedule 库定时任务

    Python schedule 库定时任务 schedule的使用 # 用于scrapy定时任务设置 import schedule import time def job(): print(&quo ...

  10. web服务报错类型

    401:无权限(HttpStatus.UNAUTHORIZED) 404:页面找不到 405:不支持get/post请求,如只支持get请求但传了post请求 400:请求格式错误,如不为null但传 ...