Django 学习笔记（五） --- Ajax 传输数据
人生苦短 ~
Tips：仅适用于 Python 3+（反正差别不大，py2 改改也能用）。因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的官方支持，所以如果你还在使用 Python 2 那就要早做准备了，毕竟没有官方的支持使用起来也不顺心的。
1. Ajax 介绍
2. 视图页面
在文件夹 \templates 中新建页面 ajax_request.html 和在 /static/js/ajax_request.js 页面，html 文件暂时添加如下代码，js 文件暂时为空：
<!DOCTYPE html>
{% load static %} <!-- 模板标签加载静态文件路径，也可以改成 load staticfiles -->
<html>
<head>
<title>HelloDjango</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><!-- 这里引入的是百度的 JQuery -->
<script type="text/javascript" src="{% static 'js/ajax_request.js' %}"></script> <!-- 我们 get post 请求需要使用的自定义 js -->
</head>
<body> </body>
</html>
在我们的应用模块中 /mydjango/views.py 添加以下四个函数，函数暂时返回空：
# 默认访问页面
def ajax_index(request):
return render(request, 'ajax_request.html') # Ajax GET 提交数据
def ajax_get(request):
return HttpResponse('') # Ajax POST 提交数据
def ajax_post(request):
return HttpResponse('') # Ajax 返回 JSON 数据
def ajax_json(request):
return HttpResponse('')
在我们的应用模块中 /mydjango/urls.py 添加一下四个访问链接：
path('ajax/index/', views.ajax_index),
path('ajax/get/', views.ajax_get),
path('ajax/post/', views.ajax_post),
path('ajax/json/', views.ajax_json),
3. GET 提交数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>GET 提交数据：</h3>
<input type="number" id="num1" /> *
<input type="number" id="num2" />
<button onclick="fun_get();"> = </button>
<font style="color:red;"><span id="result_get"></span></font>
<hr />
在 views.py 中的 ajax_get 方法中获取数据并实现操作：
# Ajax GET 提交数据
def ajax_get(request):
a = request.GET.get("a")
b = request.GET.get("b")
n = int(a) * int(b)
return HttpResponse(str(n))
js 添加 get 请求操作：
function fun_get() {
var a = $("#num1").val();
var b = $("#num2").val();
$.get("/mydjango/ajax/get/", { 'a': a, 'b': b }, function(ret){
$('#result_get').html(ret);
});
}
可以看到浏览器请求的地址和执行结果：
4. POST 提交数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>POST 提交数据：</h3>
<input type="number" id="num_post1" /> *
<input type="number" id="num_post2" />
<button onclick="fun_post();"> = </button>
<font style="color:red;"><span id="result_post"></span></font>
<hr />
在 views.py 中的 ajax_post 方法中获取数据并实现操作：
# Ajax POST 提交数据，csrf_exempt 是告诉你的视图不要检查 csrf 标记，不加的话会报 403 错误
# 需要导入包 from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def ajax_post(request):
a = request.POST.get("a", 0) # 0 是默认值
b = request.POST.get("b", 0)
n = int(a) * int(b)
return HttpResponse(str(n))
js 添加 post 请求操作：
function fun_post() {
var a = $("#num_post1").val();
var b = $("#num_post2").val();
$.ajax({
type : 'post',
url : '/mydjango/ajax/post/',
dataType : 'json',
data : {
'a': a,
'b': b
},
success : function(ret) {
$('#result_post').html(ret);
},
error : function(err) {
}
});
}
可以看到浏览器请求的地址和执行结果：
5. POST 返回 JSON 数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>POST 请求 JSON 数据：</h3>
<button onclick="fun_json();"> 请求 JSON </button>
<font style="color:green;"><span id="result_json"></span></font>
<hr />
在 views.py 中的 ajax_json 方法中获取数据并实现操作：
# Ajax 返回 JSON 数据，csrf_exempt 是告诉你的视图不要检查 csrf 标记，不加的话会报 403 错误
# 需要导入包 from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def ajax_json(request):
name_dict = {'name': 'Django', 'age': 18, 'phone': ''}
return HttpResponse(json.dumps(name_dict), content_type='application/json')
js 添加 post 请求 JSON 操作：
function fun_json() {
$.ajax({
type : 'post',
url : '/mydjango/ajax/json/',
dataType : 'json',
success : function(ret) {
$('#result_json').html(JSON.stringify(ret));
},
error : function(err) {
}
});
}
可以看到浏览器请求的地址和执行结果：
~ 我学 Python
Django 学习笔记（五） --- Ajax 传输数据的更多相关文章
- Django学习笔记之Ajax入门
AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...
- Django学习笔记之Ajax与文件上传
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...
- Django学习笔记（五）—— 表单
疯狂的暑假学习之 Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- Django 学习笔记（五）模板标签
关于Django模板标签官方网址https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.IF标签 Hello World/vi ...
- Django学习笔记（16）——扩展Django自带User模型，实现用户注册与登录
一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...
- Django学习笔记（11）——开发图书管理页面
一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...
- Django 学习笔记（四）模板变量
关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量 在hello/Hell ...
- Django 学习笔记（七）数据库基本操作（增查改删）
一.前期准备工作,创建数据库以及数据表,详情点击<Django 学习笔记(六)MySQL配置> 1.创建一个项目 2.创建一个应用 3.更改settings.py 4.更改models.p ...
- Django 学习笔记（六）MySQL配置
环境:Ubuntu16.4 工具:Python3.5 一.安装MySQL数据库 终端命令: sudo apt-get install mysql-server sudo apt-get install ...
随机推荐
- Call to undefined function Workerman\posix_getpid()
安装扩展 yum install php-posix
- Ural 1018 Binary Apple Tree
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1018 Dynamic Programming. 首先要根据input建立树形结构,然后在 ...
- 学习Tensorflow的LSTM的RNN例子
学习Tensorflow的LSTM的RNN例子 基于TensorFlow一次简单的RNN实现 极客学院-递归神经网络 如何使用TensorFlow构建.训练和改进循环神经网络
- TensorFlow数据读取
TensorFlow高效读取数据的方法 TF Boys (TensorFlow Boys ) 养成记(二): TensorFlow 数据读取 Tensorflow从文件读取数据 极客学院-数据读取 十 ...
- shell脚本学习-执行
跟着RUNOOB网站的教程学习的笔记 Shell与Shell脚本 Shell是用户与Linux系统的桥梁.它既是一种命令语言,也是一种程序设计语言. Shell脚本是一种Shell编写的脚本程序,其实 ...
- httphandler httpmodule一些个人理解
asp.net 对于http请求需要走一个管道就行一层一层的过滤:比如身份验证,根据请求的资源不同分发给具体哪个dll来处理 这些管道中就是httpmodule.所以我们自己写的httpmodule实 ...
- 【BZOJ4025】 二分图（线段树分治）
传送门 BZOJ Solution 只是为了学习一下线段树分治的啦! 当你学会线段树分治之后,可以跳过下面的一部分: 按照时间搞一颗线段树出来,把包含这段区间的操作用vector压进去. 每一个线段树 ...
- 响应式网站设计(Responsive Web design)
页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.CSS media query的使用等.无论用 ...
- Laravel在进行表单验证时，错误信息未返回
马上要毕业了,找了现在的这家公司,压力不大,自己也比较喜欢,唯一的遗憾就是手机号莫得换了(找不到换的借口). 进入正题: 之前自己的博客(http://lxiaoke.cn)是用ThinkPHP开发的 ...
- Mac 安装微软雅黑字体
https://www.jianshu.com/p/d8c34fff3483 1.找一台Windows电脑,打开字体文件夹C:\Windows\Fonts. 2.搜索"Calibri.微软雅 ...