Django中后端ajax,Django之前后端交互使用ajax的方式

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

随机推荐

LeetCode 102

方法一:(迭代) /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; * ...

【设计模式】—— 单例模式Singleton

前言:[模式总览]——————————by xingoo 模式意图 保证类仅有一个实例,并且可以供应用程序全局使用.为了保证这一点,就需要这个类自己创建自己的对象,并且对外有公开的调用方法. 模式结构 ...

C#实现RSA加密和解密详解

原文:C#实现RSA加密和解密详解 RSA加密解密源码: Code highlighting produced by Actipro CodeHighlighter (freeware) http:/ ...

C++语言------顺序表实现,用动态数组的方法

C++ 中常用的一些东西,通过使用动态数组来实现顺序表, 掌握了一下知识点: 1.预处理有三中方法 宏定义,文件包含,条件编译 2.使用同名的变量时,可以在外层使用命名空间 类解决变量名重定义的错误 ...

[转帖]Windows 使用netsh 命令行方式处理 windows防火墙的方法

Windows防火墙命令行手册 https://blog.csdn.net/mystudyblog0507/article/details/79617629 简介 netsh advfirewall ...

C#基础第六天-作业答案-利用面向对象的思想去实现名片

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

linux下时间同步的两种方法分享

方法1:与一个已知的时间服务器同步 复制代码 代码如下: ntpdate time.nist.gov 其中 time.nist.gov 是一个时间服务器. 删除本地时间并设置时区为上海 复制代码 代码 ...

ABP-JavaScript API (转)

转自:http://www.cnblogs.com/zd1994/p/7689164.html 因经常使用,备查 一.AJAX 1,ABP采用的方式 ASP.NET Boilerplate通过用abp ...

Hadoop2.x介绍与源代码编译

1.Hadoop 项目的四大模块 Hadoop Common: The common utilities that support the other Hadoop modules. Hadoop D ...

Django：学习笔记(4)——请求与响应

Django:学习笔记(4)——请求与响应 0.URL路由基础 Web应用中,用户通过不同URL链接访问我们提供的服务,其中首先经过的是一个URL调度器,它类似于SpringBoot中的前端控制器. ...