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. python中的变量对象小结2

    # .变量名和数据内容是分开存储的. # .数据保存在内存中的一个位置(地址). # .变量中保存着数据在内存中的地址. # 引用就是变量中记录数据的地址. #不可变变量,重新赋值时会重新开辟一个地址 ...

  2. win10下载软件防止被杀

    很少接触win10,现在需要下载一个软件,但是一直被和谐掉 解决方案: Windows defender 点击病毒和威胁防护 打开定期扫描 找到病毒威胁防护设置 找到排除项 添加排除项 下载成功 但是 ...

  3. Linux中PATH、 LIBRARY_PATH、 LD_LIBRARY_PATH和ROS_PACKAGE_PATH

    PATH 保存可执行文件程序路径,我们命令行中每一句能运行的命令都是系统先通过PATH来找到命令执行文件所在的位置,再运行这个命令. 实验:执行echo $PATH 能看到当前环境PATH都是配置了哪 ...

  4. nips2014下载

    nips2014下载 wget http://papers.nips.cc/book/advances-in-neural-information-processing-systems-27-2014 ...

  5. [原]how to view custom provider's events(collected without provider registered) by wpa

    最近想使用etw作为高效的日志机制,也不想暴露机密信息(关键信息在msnifest文件中).也就是不能在客户机器上注册自己的provider,那需要manifest文件.这样采集回来的.etl文件如果 ...

  6. 爬虫—文件存储—CSV存储

    一,简介 CSV,全称Comma—Separated Values,可以称为逗号分隔或者字符分隔值,其文件以纯文本形式存储表格数据.该文件是一个字符序列,可以有任意的数目记录组成,记录间已某种换行符分 ...

  7. elementUI的select全选

    elementUI中的el-select全选 <template> <el-select class="handle-select" size="min ...

  8. SpringBoot集成ssm-druid-通用mapper

    简单介绍 springboot 首先什么是springboot? springboot是spring的另外一款框架,设计目的是用来简化新的spring应用的搭建和开发时所需要的特定的配置,从而使开发过 ...

  9. axios 模拟同步请求

    axios本身没有同步请求,但是我们很多情况下必须得需要同步请求.那么应该怎么做? 上网查了一些资料有人说用es6的 async +  assert 我不知道有没有效果,因为我的功能中是没啥效果的. ...

  10. [LC] 659. Split Array into Consecutive Subsequences

    Given an array nums sorted in ascending order, return true if and only if you can split it into 1 or ...