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. Rails render collection 的魔法

    都知道的, 在 Rails 的 View 里边渲染集合的时候, 会用到 render 方法参数的 collection 选项 1 <%= render partial: "produc ...

  2. 5)PHP，可变变量

    所谓可变变量,就是一个变量的名,又是一个变量. 可变变量的语法是php的很特殊的语法——其他语言中少见. $v1 = “abc”; //这是一个字符串变量,其内容是字符串“abc” $abc = ; ...

  3. 吴裕雄--天生自然 PYTHON3开发学习：集合

    fruits = {"apple", "banana", "cherry"} fruits.add("orange") ...

  4. redis day02

    Redis -带过期时间的key  如何删除掉的? 在redis内部有个  过期字典,所有带过期时间的都有过期字典 默认情况下 redis每秒会进行着10次过期字典的扫描,在每一次扫描过程里,执行如下 ...

  5. 2019 年百度之星·程序设计大赛 - 初赛一 1005 Seq（数学规律）

    http://bestcoder.hdu.edu.cn/contests/contest_showproblem.php?cid=861&pid=1005 Sample Input Sampl ...

  6. iTOP-iMX6UL开发板-MiniLinux-CAN测试使用文档

    本文档介绍的是迅为iMX6UL开发板在 MiniLinux 系统环境下 iTOP-iMX6UL CAN 实验调试步骤.给用户提供了“can_libs.rar”.“can_tools.zip”和“can ...

  7. Dcoker 部署Tomcat+redis+war

    1.首先安装redis docker run –name my-redis -d redis 2.安装tomcat并启动 docker run -p 8383:8383 –name tomcat -v ...

  8. mysql常用方法案例

    SELECTms.id,ms.name,ms.address,ms.mobile AS phone,ms.UUID,(case when ce.score is null then 0 else ce ...

  9. F. Rhyme scheme

    题: https://nanti.jisuanke.com/t/41414 #include<bits/stdc++.h> using namespace std; typedef __i ...

  10. curl查看请求你响应时间

    [root@localhost ~]# curl -o /dev/null -s -w time_namelookup:%{time_namelookup}"\n"time_con ...