Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

场景:

优点：

AJAX使用Javascript技术向服务器发送异步请求

AJAX无须刷新整个页面

创建一个新的Django项目:

目录结构如下:

修改urls.py文件，添加一个index路径

from django.contrib import admin

from django.urls import path

from app import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

]

修改视图函数views.py

from django.shortcuts import render

# Create your views here.

def index(request):

    return render(request, "index.html")

引入jquery文件,有两种方式

第一种cdn引入

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

第二种本地文件引入

在项目目录下面创建一个static的文件夹

修改settting.py文件,添加内容如下:

STATICFILES_DIRS = [

    os.path.join(BASE_DIR, "static")

]

创建一个jquery.min.js文件，把jquery的内容复制进去就好

在templates模版下，创建index,html文件,内容如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery.min.js"></script>

</head>

<body>

<button class="btn">click</button>

<script>

 $(".btn").click(function () {

        alert(123)

    })

</script>

</body>

</html>

启动Django,访问

http://127.0.0.1:8000/index

发送ajax请求

修改index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery.min.js"></script>

</head>

<body>

<button class="btn">click</button>

<script>

 $(".btn").click(function () {

        // 发送Ajax请求

     $.ajax({

            url:"http://127.0.0.1:8000/books/",

            type:"get", // 默认get请求

            success:function (data) {  //回调函数,拿到数据后的操作

            console.log(data)

            }

        })

    })

</script>

</body>

</html>

新建路径books，修改urls.py文件

from django.contrib import admin

from django.urls import path

from app import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.index),

    path('books/', views.books),

]

新建视图函数:

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request, "index.html")

def books(request):

    return HttpResponse("金梅")

访问http://127.0.0.1:8000/index

点击按钮，局部刷新,返回数据

增加标签:

修改index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery.min.js"></script>

</head>

<body>

<button class="btn">click</button>

<p class="con"></p>

<script>

 $(".btn").click(function () {

        // 发送Ajax请求

      $.ajax({

           url:"http://127.0.0.1:8000/books/",

           type:"get", // 默认get请求

           success:function (data) {  //回调函数,拿到数据后的操作

               console.log(data);

               $(".con").html(data)  //往p标签里面添加内容

 }

        })

    })

</script>

</body>

</html>

访问http://127.0.0.1:8000/index

举例：做一个加法计算

修改index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="/static/jquery.min.js"></script>

</head>

<body>

<button class="btn">click</button>

<p class="con"></p>

<hr>

<button class="cal">计算</button>

<script>

 $(".btn").click(function () {

        // 发送Ajax请求

     $.ajax({

            url:"http://127.0.0.1:8000/books/",

            type:"get", // 默认get请求

            success:function (data) {  //回调函数,拿到数据后的操作

              console.log(data);

              $(".con").html(data)  //往p标签里面添加内容

 }

        })

    })

    

    // 利用ajax发送数据

    $(".cal").click(function () {

        $.ajax({

            url:"/cal/",

            type:"get",

            data:{

                a:1,

                b:2,

 },

            success:function (data) {

                console.log(data)

            }

        })

    })

</script>

</body>

</html>

修改视图函数

from django.shortcuts import render,HttpResponse

# Create your views here.

def index(request):

    return render(request, "index.html")

def books(request):

    return HttpResponse("金梅")

def cel(request):

    a = request.GET.get("a")

    b = request.GET.get("b")

    res = int(a) + int(b)

    return HttpResponse(str(res)

转载出处:

http://www.py3study.com/Article/details/id/329.html

django--ajax的使用,应用的更多相关文章

  1. Django ajax MYSQL Highcharts<1>

    Another small project with django/Ajax/Mysql/Highcharts. 看下效果图  - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...

  2. django ajax练习

    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...

  3. 关于Django Ajax CSRF 认证

    CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...

  4. django ajax增 删 改 查

    具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...

  5. python学习-- Django Ajax CSRF 认证

    使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...

  6. django ajax 及批量插入数据 分页器

    ``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...

  7. Django——Ajax

    1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...

  8. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  9. Django ajax提交 登录

    一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...

  10. django ajax报错解决：You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set.

    Django版本号:1.11.15 django中ajax请求报错:You called this URL via POST, but the URL doesn't end in a slash a ...

随机推荐

  1. 37）智能指针（就是自动delete空间）

    1)问题引入: 在java或者在C++中,一旦你new一个东西,那么必然有一个delete与之对应,比如: int main() { int* p= new int(): *p=: delete p: ...

  2. poj1386单词连接（欧拉欧拉欧拉）

    ///单词连接,欧拉回路通路都可以(有向图) ///主要构图:比如possibilities就构造p->s的边////题目大意:给你若干个字符串,一个单词的尾部和一个单词的头部相同那么这两个单词 ...

  3. Hardy-Weinberg laws

    I.3 Diploids with two alleles: Hardy-Weinberg laws 假设子代是Aa,AA,aa的概率分别是PAa,PAA,Paa,A的基因概率是P1,a的基因概率是P ...

  4. [WC2010]重建计划（长链剖分+线段树+分数规划）

    看到平均值一眼分数规划,二分答案mid,边权变为w[i]-mid,看是否有长度在[L,R]的正权路径.设f[i][j]表示以i为根向下j步最长路径,用长链剖分可以优化到O(1),查询答案线段树即可,复 ...

  5. SimpleDateFormat 线程安全的解决方案--DateTimeFormatter

    SimpleDateFormat并不是线程安全的,因为在SimpleDateFormat中持有一个Calendar类对象在Parse 和Format方法时会调用calendar.setTime(dat ...

  6. [HNOI2003]操作系统 优先队列用法

    题:https://www.cometoj.com/problem/1046 #include<bits/stdc++.h> using namespace std; typedef lo ...

  7. Qt LNK1112: 模块计算机类型“x64”与目标计算机类型“X86”冲突问题

    解决方法:1.找到选项: 2.点击构建套件kit,选择x86_amd64,之后便不会出现类似问题了

  8. 做成像的你不能不了解的真相7-两分钟测算相机增益(Gain)

    前几期真相文章得到了读者积极的反馈,其中提问最多的就是这个公式: 首先,大家觉得这个公式太有用了.以前只能定性地评价图像质量,现在一下子就能直接算出信噪比,瞬间高大上了许多有木有.然而,杯具的现实是, ...

  9. vue2.0学习之基础内容

    import BScroll from 'better-scroll'; import star from '../star/star.vue'; import split from '../spli ...

  10. HBase单机安装及Phoenix JDBC连接

    HBase是建立在Hadoop文件系统之上的分布式面向列的数据库,它是横向扩展的.它利用了Hadoop的文件系统(HDFS)提供的容错能力. HBase提供对数据的随机实时读/写访问,可以直接HBas ...