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请求的案例

前端

{# form表单提交数据:form提交数据后,一定会发生页面的跳转 #}
{# ajax提交数据:只向后台请求数据,请求的过程是异步的,请求成功后有一个回调函数,携带后台返回的数据 #}
form表单的简单发送请求
$('.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)
}
})
})

ajax发送请求的案例

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

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

ajax学习----json,前后端交互,ajax

json 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)中的数 ...