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. 5V转10.5V原理图

  2. java中如果我老是少捕获什么异常，如何处理？

    马克-to-win:程序又一次在出现问题的情况下,优雅结束了.上例中蓝色部分是多重捕获catch.马克-to-win:观察上面三个例子,结论就是即使你已经捕获了很多异常,但是假如你还是少捕获了什么异常 ...

  3. uniapp中websokcet封装和使用

    1.  websocket.js   封装代码 //是否已经连接上ws let isOpenSocket = false //心跳间隔,单位毫秒 let heartBeatDelay = 3000 l ...

  4. Jar 包下载以及 maven jar 包配置

    学习内容: jar包下载是我们必须掌握的一个内容,不管是使用Maven项目还是其他项目,一般都需要引入外部的 jar 包 jar包下载 下载地址(打不开网址的直接百度搜索 maven reposito ...

  5. js判断json数据是否存在某字段的方法

    方式一 !("key" in obj) if("name" in json){//json就是数组,name是你要找的值 console.log("有 ...

  6. lunix或者centos服务器下如何下载自己在github上面的项目代码

    1.在github找到项目压缩包下载地址 打开自己的github主页找到需要下载的项目首页,如图所示,找到zip下载地址(ps:如何找这个地址我就不多说了,了解过一点html的同学肯定很容易可以找到) ...

  7. Promise原理实现（一）：前置知识点

      实现promise首先需要了解如下知识点: 1: 高阶函数 (一个函数作为另外一个函数的参数,这个包含的函数就是高阶函数): outer是一个高阶函数,inner函数作为一个参数传递:此处也是闭包 ...

  8. Makefile 简介

    一.引例: #Makefile objects=test1.o test2.o main:$(objects) gcc -o main $(objects) clean: rm main $(obje ...

  9. 解决PHP下载大文件失败，并限制下载速度

    1.问题: PHP在使用readfile函数定义下载文件时候,文件不可以过大,否则会下载失败,文件损坏且不报错: 2.原因: 这个是因为readfile读取文件的时候会把文件放入缓存,导致内存溢出: ...

  10. SpringMVC快速使用——基于XML配置和Servlet3.0

    SpringMVC快速使用--基于XML配置和Servlet3.0 1.官方文档 https://docs.spring.io/spring-framework/docs/5.2.8.RELEASE/ ...