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的方式的更多相关文章
-
一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
-
ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
-
Vue-CLI项目-axios模块前后端交互(类似ajax提交)
08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...
-
Django 前后端数据传输、ajax、分页器
返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...
-
前端ajax的各种与后端交互的姿势
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...
-
Vue之前后端交互
Vue之前后端交互 一.前后端交互模式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责 ...
-
Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
-
前端和后端的数据交互(jquery ajax+python flask+mysql)
上web课的时候老师布置的一个实验,要求省市连动,基本要求如下: 1.用select选中一个省份. 2.省份数据传送到服务器,服务器从数据库中搜索对应城市信息. 3.将城市信息返回客户,客户用sele ...
-
content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
随机推荐
-
CSharpGL(20)用unProject和Project实现鼠标拖拽图元
CSharpGL(20)用unProject和Project实现鼠标拖拽图元 效果图 例如,你可以把Big Dipper这个模型拽成下面这个样子. 配合旋转,还可以继续拖拽成这样. 当然,能拖拽的不只 ...
-
IIS+php+mysql 环境搭建
1.安装IIS,并安装CGI角色: 2.安装php manager IIS扩展: 3.安装php: 4.配置php manager, 添加php php-cgi.exe执行路径 : 5.下载mysql ...
-
java File详解
一.简介 File类是“文件”和“目录名”的抽象表示形式.因此在java语言中,File类既可以表示文件也可以表示目录. 尽管java.io定义的大多数类是实行流式操作的,而File类则不是,它没有指 ...
-
Spring MVC 时间字符串 @PathVariable获取
@PathVariable("date") @DateTimeFormat(pattern="yyyy-MM-dd") Date date
-
Kafka consumer处理大消息数据问题
案例分析 处理kafka consumer的程序的时候,发现如下错误: ERROR [2016-07-22 07:16:02,466] com.flow.kafka.consumer.main.Kaf ...
-
【 js 基础 】【 源码学习 】 setTimeout(fn, 0) 的作用
在 zepto 源码中,$.fn 对象 有个 ready 函数,其中有这样一句 setTimeout(fn,0); $.fn = { ready: function(callback){ // don ...
-
使用Admin监控
在springboot中,也提供了很全面的监控系统.这篇文章介绍一下springboot-admin监控springboot项目. 原来大致是这样的,springboot--admin--server ...
-
topcoder srm 550 div1
problem1 link 因为数据比较小,直接开一个二维数组记录哪些格子已经遍历,哪些还没有.进行模拟即可. problem2 link 模拟一些小数据,可以发现,AB的形状以及要求的区间是下面的样 ...
-
Python oct() 函数
Python oct() 函数 Python 内置函数 描述 oct() 函数将一个整数转换成8进制字符串. 语法 oct 语法: oct(x) 参数说明: x -- 整数. 返回值 返回8进制字符 ...
-
36、IO流概述和分类
IO流概述 IO流的主要作用是用来处理设备之间的数据传输,例如可以使用IO流将一台电脑硬盘里面的照片传输到另一台电脑上面,即将照片转换为字节,然后将字节传到另一台电脑上面,另一台电脑接收后,可以将这些 ...