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. 五、Shell脚本高级编程实战第五部

    一.条件表达式 在bash的各种流程控制结构中通常要进行各种测试,然后根据测试结果执行不同的操作.有时也和if结合,让我们方便判断. test: 1)判断文件是否存在:test -f  file 2) ...

  2. beta函数分布图

    set.seed(1) x<-seq(-5,5,length.out=10000) a = c(.5,0.6, 0.7, 0.8, 0.9) b = c(.5, 1, 1, 2, 5) colo ...

  3. 17.3.16---python内建函数

    内置函数,无需import,任何时候都可以直接被使用 1------ Python针对众多的类型,提供了众多的内建函数来处理(内建是相对于导入import来说的,后面学习到包package时,将会介绍 ...

  4. lambda concurrent List<Map> to Map

    Object c = Stream.of( CompletableFuture.supplyAsync(() -> { Map m = new HashMap(); try { Thread.s ...

  5. /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64/bin/java: No such file or directory

    在linux使用两个tomcat的时候, 执行./shutdown.sh的时候, 遇到了这个问题 这个可怎么办呢 原来是我的java下面的文件目录是/java-1.8.0-openjdk-1.8.0. ...

  6. String Distance and Transform Process

    http://acm.hdu.edu.cn/showproblem.php?pid=1516 Problem Description String Distance is a non-negative ...

  7. day24-练习

    #17.有四个数字:1 2 3 4 ,能组成多少个各不相同且数字不重复的三位数?各是多少? count = 0 for i in range(1,5): for j in range(1,5): fo ...

  8. python语法基础-并发编程-线程-长期维护

    ###############   线程和GIL,全局解释器锁    ############## """ 线程 为什么会有进程? 主要是能够同时处理多个任务,多个任务还 ...

  9. vue2.0学习之动画

    下载animate.css <transition name="v"> <div class="content">需要做动画的内容< ...

  10. 火车进出栈 java

    题目描述 一列火车n节车厢,依次编号为1,2,3,…,n.每节车厢有两种运动方式,进栈与出栈,问n节车厢出栈的可能排列方式有多少种. 输入 一个数,n(n<=60000) 输出 一个数s表示n节 ...