人生苦短 ~

Tips:仅适用于 Python 3+(反正差别不大,py2 改改也能用)。因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的官方支持,所以如果你还在使用 Python 2 那就要早做准备了,毕竟没有官方的支持使用起来也不顺心的。

1. Ajax 介绍

Ajax 即 “Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 Javascript 和 XML(标准通用语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 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" />&nbsp;*&nbsp;
<input type="number" id="num2" />
<button onclick="fun_get();">&nbsp;=&nbsp;</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" />&nbsp;*&nbsp;
<input type="number" id="num_post2" />
<button onclick="fun_post();">&nbsp;=&nbsp;</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();">&nbsp;请求 JSON&nbsp;</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 传输数据的更多相关文章

  1. Django学习笔记之Ajax入门

    AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...

  2. Django学习笔记之Ajax与文件上传

      Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  3. Django学习笔记(五)—— 表单

    疯狂的暑假学习之  Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path         ...

  4. Django学习笔记(14)——AJAX与Form组件知识补充(局部钩子和全局钩子详解)

    我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...

  5. Django 学习笔记(五)模板标签

    关于Django模板标签官方网址https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.IF标签 Hello World/vi ...

  6. Django学习笔记(16)——扩展Django自带User模型,实现用户注册与登录

    一,项目题目:扩展Django自带User模型,实现用户注册与登录 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册,登录,用户认证,注销,修改密码等功能. ...

  7. Django学习笔记(11)——开发图书管理页面

    一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...

  8. Django 学习笔记(四)模板变量

    关于Django模板变量官方网址:https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.传入普通变量 在hello/Hell ...

  9. Django 学习笔记(七)数据库基本操作(增查改删)

    一.前期准备工作,创建数据库以及数据表,详情点击<Django 学习笔记(六)MySQL配置> 1.创建一个项目 2.创建一个应用 3.更改settings.py 4.更改models.p ...

  10. Django 学习笔记(六)MySQL配置

    环境:Ubuntu16.4 工具:Python3.5 一.安装MySQL数据库 终端命令: sudo apt-get install mysql-server sudo apt-get install ...

随机推荐

  1. SPARK安装一:Windows下VirtualBox安装CentOS

    一.虚拟机安装 重点是网络设置,参见:https://www.linuxidc.com/Linux/2018-04/151924.htm 本文用三台2核4g虚拟机做集群,虚拟机安装centos7,如下 ...

  2. OpenGL Compute Shader靠谱例子及读取二进制Shader,SPIR-V

    学OpenGL以来一直苦恼没有像DX那样可以读取二进制Shader使用的方法,除去有时不想公开自己写的牛逼Shader的心理(虽然目前还从没写过什么牛逼的Shader), 主要是不用现场编译,加快读取 ...

  3. s5-6 Linux 标准输出 系统优化 目录结构

    标准输出 重定向符号 #>   1>    标准输出重定向  先把文件的内容清空   把内容放在文件的最后一行 #>>  1>>   追加重定向      把内容放 ...

  4. 图像质量评价方法PSNR+SSIM&&评估指标SROCC,PLCC

    update:2018-04-07 今天发现ssim的计算里面有高斯模糊,为了快速计算,先对每个小块进行计算,然后计算所有块的平均值.可以参考源代码实现,而且代码实现有近似的在里面!matlab中中图 ...

  5. 机器学习之KNN算法

    1 KNN算法 1.1 KNN算法简介 KNN(K-Nearest Neighbor)工作原理:存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属 ...

  6. [UWP]使用Picker实现一个简单的ColorPicker弹窗

    在上一篇博文<[UWP]使用Popup构建UWP Picker>中我们简单讲述了一下使用Popup构建适用于MVVM框架下的弹窗层组件Picker的过程.但是没有应用实例的话可能体现不出P ...

  7. Spring Data Solr的分组查询 for 搜索面板的商品分类

    private List searchCategoryList(Map searchMap) { SimpleQuery query = new SimpleQuery(new Criteria(&q ...

  8. cad2008 参照面板 在位编辑后无法使用

    有时候在位编辑之后,保存在位编辑了,可是参照面板无法动了,这个时候只要保存一下,然后ctrl+z,就可以解决了..蛮神奇的,我还没想到如何用代码去搞定它..

  9. 4.json解析

    格式 {"name":"zhangsan", "age":18, "books":[{"name": ...

  10. Android精通之OrmLite数据库框架,Picasso框架,Okio框架,OKHttp框架

    版权声明:未经博主允许不得转载 OrmLite基础知识 什么是OrmLite框架,在我没用这个框架时,不知道它有多好,用了才知道很方便哦,为了提供开发效率,Android开发者需要懂得运行多种框架进行 ...