人生苦短 ~

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. 九校联考_24OI——餐馆restaurant

    凉心模拟D1T1--最简单的一道题 TAT 餐馆(restaurant) 题目背景 铜企鹅是企鹅餐馆的老板,他正在计划如何使得自己本年度收益增加. 题目描述 共有n 种食材,一份食材i 需要花ti 小 ...

  2. 学生管理系统(Java Swing JDBC MySQL)

    该系统使用 Java Swing.JDBC.MySQL 开发 开发环境 Eclipse.WindowBuilder JDK版本:1.8 代码在百度网盘中(176***5088) 目录结构如下 Data ...

  3. 设计模式 策略模式2 c++11

    根据需求的不同 选择不同的策略算法 之前是保存的各种策略类的指针 这里直接使用 function  bind 选择对应的算法 代码 // 005.cpp: 定义控制台应用程序的入口点. // #inc ...

  4. W7500P硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器（48MHZ）

    W7500P 硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器(48MHZ) 硬件TCP/IP+硬件物理层PHY+Cortex-M0处理器(48MHZ) 如果您发现商品信息不准确,欢迎纠错 ...

  5. Linux 第八天

    4.源码包和rpm包的区别 1)区别 安装前:概念上的区别 安装后:安装位置不同 2)安装位置 rpm包安装位置 Rpm包默认安装路径 /etc/ 配置文件安装目录 /usr/bin/ 可执行的命令安 ...

  6. Java程序员职业生涯规划

    一.规划 工作3年了,感觉自己的技术现在到了一个瓶颈,在做一些重复性的业务性的工作,没有长进,提高太慢:因此停下脚步对自己的职业生涯做了一个规划,并为之努力奋斗: 20-27岁:技术积累阶段在这 5 ...

  7. c++两个类相互调用

    有可能会碰到两个类之间的相互调用的问题,例如:定义了类A和类B,A中使用了B定义的类型,B中也使用了A定义的类型 class A { B b; }; class B { A a; }; 编译器在声明A ...

  8. s5 Docker的持久化存储和数据共享

    数据库容器的数据如何才能不会丢失?Docker的持久化存储技术.Docker的数据共享技术能极大提高开发人员的开发效率,边写代码,边看运行结果. 数据持久化之Data Volume Docker持久化 ...

  9. R语言csv与txt文本读入区分（sep参数）

    R语言csv与txt文本读入区分 R语言用来处理数据很方便,而处理数据的第一步是把数据读入内存空间,平时最常用的文本数据储存格式有两种: 一种是CSV(逗号分隔符文本)另一种是TXT(Tab分隔符或空 ...

  10. 1.2万事开头hello world+交互+getpass、sys模块初识

    1.python的hello world: ①运行cmd-输入python-输入print (“hello world!”) ②创造.py的文本helloworld.py(后缀是为了告诉其他人)-输入 ...