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. 小记-用canvas完成图像液化（向前变形）过程

    前几天由于团队需要,折腾了一下图像液化的处理过程. 现在来整理一下思路,做个记录. 用到公式如下,网上拿来的 话不多说,上代码 本来想尽量写出点逼格...后来发现怎么写也还是几个function搞定, ...

  2. Socket.io+Notification实现浏览器消息推送

    前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...

  3. 微信小程序黑客马拉松即将开始，来做最酷的 Mini Program Creators！

    微信小程序黑客马拉松正式启动 近日,小程序斩获一项世界级殊荣--作为一项全新的技术和应用创新,小程序首次获选世界互联网领先科技成果.目前小程序应用数量已超过 100 万,覆盖了 200 多个细分行业, ...

  4. PAT B1014 福尔摩斯约会

    大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就明白了,字条上奇 ...

  5. Shiro 安全框架详解二（概念+权限案例实现）

    Shiro 安全框架详解二 总结内容 一.登录认证 二.Shiro 授权 1. 概念 2. 授权流程图 三.基于 ini 的授权认证案例实现 1. 实现原理图 2. 实现代码 2.1 添加 maven ...

  6. EFCore 6.0入门看这篇就够了

    前言 作为一直在dotNet行业耕耘的码农,这几年在大大小小项目中也涉及到了许多ORM框架,比如:EFCore,Dapper,NHibernate,SqlSugar等等,这些ORM都有各自的优缺点,大 ...

  7. npm使用淘宝镜像源

    npm使用淘宝镜像源 单次使用 npm install koa --registry=https://registry.npm.taobao.org 永久使用 配置淘宝镜像源 npm config s ...

  8. LC-1

    Two Sum Given an array of integers nums and an integer target, return indices of the two numbers suc ...

  9. 服务器的cpu 核心、线程

    此版本有大范围改动,因为cpu作为一个大脑,所以更细致的进行了,相关的分析和阐述. 1.版本1. 2022.1.242.版本2: 2022.3.2 采集数据: ht2机器为物理机,cpu是4颗cpu, ...

  10. JDK1.8.0_181的无限制强度加密策略文件变动(转载)

    JDK1.8.0_181的无限制强度加密策略文件变动 原文地址 https://my.oschina.net/my1313677/blog/3109613 作者 葉者 日常记录 2019/09/23 ...