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. Ubuntu目錄

    /         (这就是著名的根)├── bin         (你在终端运行的大多数程序,比如cp.mv...)├── boot         (内核放在这里,这个目录也经常被作为某个独立分 ...

  2. 在python实现加密的方式总结

    基础知识扫盲 对称加密 对称密钥加密 , 又叫私钥加密.即信息发送的方和接受方用一个密钥去加密和揭秘数据. 最大的优势是 加解密速度快,适合对大量数据进行加密, 对称加密的缺点是密钥的管理和分配, 换 ...

  3. iOS 直接使用16进制颜色

    在做iOS开发时,一般我们会吸色,就是产品给的图我们一般会吸色,但是最近吸色时候,老大说有较大的颜色偏差,所以要求我们直接使用UI给出的额16进制颜色,你也可以搜索<RGB颜色值转换成十六进制颜 ...

  4. Angular ng-container ng-template 用法

    ng-container本身不创建任何html代码,相当于一个容器. <ng-container *ngFor="let item of dataSource;let i=index& ...

  5. 1年6亿美元！Uber小费功能或引行业变革

    当一个行业由稚嫩走向成熟,必然要在大方向上面对两个选择--一是继续在行业内深挖,二是不断向外围扩张.就像电商行业原本只是纯粹的交易中介形态,现在既不断深挖垂直电商新模式,又继续拓展新业务试图玩转跨界. ...

  6. SVN服务器的搭建（一）

    1.基本概念 1.1.什么是版本控制 简单点来说,版本控制就是数据仓库,它可以记录你对文件的每次更改.这样,就算你在昏天黑地的改了几个月后老板说不要了,还是按照过去那样,你也不会抓狂,简单的恢复版本操 ...

  7. rest framework-视图和路由-长期维护

    ###############   三种视图    ############### # 第一种方法:使用mixins # class AuthorView(mixins.ListModelMixin, ...

  8. 正则表达式grep学习(一)

    文本处理三剑客grep       文本过滤sed       流过滤awk       格式处理 正则表达式就是一些特殊字符组成的模式,赋予了他特定的含义 在大多数程序里,正则表达式都被置于两个正斜 ...

  9. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  10. Different Integers

    牛客一 J题 树状数组 题目描述 Given a sequence of integers a1, a2, ..., an and q pairs of integers (l1, r1), (l2, ...