专栏首页测试开发社区django--ajax的使用,应用

django--ajax的使用,应用

Ajax简介

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

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

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

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

场景:

优点:

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

AJAX无须刷新整个页面

创建一个新的Django项目:

目录结构如下:

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

from django.contrib import adminfrom django.urls import pathfrom app import viewsurlpatterns = [
    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 adminfrom django.urls import pathfrom app import viewsurlpatterns = [
    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

本文分享自微信公众号 - 测试开发社区(TestDevHome)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 说好的团队为质量负责呢?

    在蓝鲸项目,似乎大家对质量的关注意识有些欠缺,于是在项目上的不同角色、不同工作年限的人之间采样做了一次访谈,上面这个问题就是其中访谈的问题之一。有同事曾提醒我说...

    测试开发社区
  • Python+Selenium基础篇之5-第一个完整的自动化测试脚本

    作者 | Anthony_tester,300w+访问量博主,Oracle测试开发工程师。

    测试开发社区
  • 大数据下的质量体系建设

    大数据、人工智能是当前也是未来几年IT部门的重点建设方向,新的技术可以为业务突破盈利瓶颈,带来新的增长点,同时我们也发现数据中台也频频在最近的企业财...

    测试开发社区
  • django--ajax的使用,应用

    AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服...

    py3study
  • jdk运行模式由client vm切换到server vm

    配置文件的位置如下(注意为{JRE_HOME不是JDK_HOME}): 若为64位操作系统 {JRE_HOME}/lib/amd64/jvm.cfg 若为...

    神秘的寇先森
  • 扒源码 - 一个请求在flask中经历了什么

    客户端发起一个请求,Flask 都干了什么呢?url 如何与视图进行绑定的?更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』

    小闫同学啊
  • 16.4 配置Tomcat监听80端口

    配置Tomcat监听80端口目录概要 vim /usr/local/tomcat/conf/server.xml Connector port="8080" p...

    运维小白
  • 关于python中phantomjs无法访问网页的处理

    笔者使用的系统是linux ubuntu,最近在学习爬虫的过程中遇到了一个抓狂的问题,我尝试使用selenium加phantomjs来登陆网页的时候,Pytho...

    周小董
  • 比AlphaGo Zero更强的AlphaZero来了!8小时解决一切棋类!| 快讯

    读过AlphaGo Zero论文的同学,可能都惊讶于它的方法的简单。另一方面,深度神经网络,是否能适用于国际象棋这样的与围棋存在诸多差异的棋类?MCTS(蒙特卡...

    AI研习社
  • 比AlphaGo Zero更强的AlphaZero来了!8小时解决一切棋类! PENG Bo

    Photo by Jason Kempin/Getty Images for Agon Limited 作者 | 禀临科技联合创始人 PENG Bo 读过Alp...

    AI科技大本营

扫码关注云+社区

领取腾讯云代金券