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. IT架构和架构类型

    What is IT Architecture & Types of Architectures | ITARCH.INFO What is IT Architecture & Typ ...

  2. 微信小程序和公众号和H5之间相互跳转

    参考链接:https://www.imooc.com/article/22900 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 可关联已有的小程序或快速创建小程序.已关联 ...

  3. Uncaught TypeError: document.getElementsById is not a function

    今天博主终于开始攻关javascript(俗称js)了,不过要注意了,它和java可是一丁点关系都没有,就像老婆饼和老婆一样. 下面就让我们来讨论一下博主这次犯下的低级错误吧 一.背景(解决方法在文末 ...

  4. JavaFX入门及相关问题

    下个星期是我们专业的课程设计专周,主要是做一个Java的桌面应用程序,老师上课讲的是用Swing来开发图形化界面,但是听朋友说到一个可视化的图形界面工具JavaFX,本 人愚笨,弄了一天才大致调试完成 ...

  5. mybatis-day1入门案例

    首先应先创建maven工程 (jar包要导入,五个核心jar包) 如果测试运行时出现了不支持版本5,则要修改以下内容 类的路径如下 1.配置pom.xml依赖 <?xml version=&qu ...

  6. pod和容器(容易混淆的地方)

    在Kubenetes中,所有的容器均在 pod 中运行,一个pod可以承载一个或者多个相关的docker容器(或rkt,以及用户自定义容器),同一个Pod中的容器可以部署在同一个物理机器(可以叫宿主机 ...

  7. Cookie与Session、CBV添加装饰器

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  8. Python BeautifulSoup4 爬虫基础、多线程学习

    针对 崔庆才老师 的 https://ssr1.scrape.center 的爬虫基础练习.Threading多线程库.Time库.json库.BeautifulSoup4 爬虫库.py基本语法

  9. zabbix监控SSL证书有效期

    想给公司网站加上证书的监控,发现agent无此监控项.科普之后发现需要自行添加脚本以及一些操作. 环境信息 系统版本: Ubuntu20.04 zabbix server版本:5.4 (这个自定义貌似 ...

  10. 学习打卡day14&&构建之法阅读笔记第二篇

    对于书中所提到的结对编程我还是有些许感受的,在大二上学期我就有和同学合作,共同完成编码.有时候可能是我来做非常非常简易的前端页面部分,然后给同学一个基础框架,让同学往框架里面填充,时而遇到问题我再来沟 ...