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 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的使用,应用的更多相关文章
- Django ajax MYSQL Highcharts<1>
Another small project with django/Ajax/Mysql/Highcharts. 看下效果图 - delivery dashboard .嘿嘿 是不是还蛮好看的. 废 ...
- django ajax练习
这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...
- 关于Django Ajax CSRF 认证
CSRF(Cross-site request forgery跨站请求伪造,也被称为“one click attack”或者session riding,通常缩写为CSRF或者XSRF,是一种对网站的 ...
- django ajax增 删 改 查
具于django ajax实现增 删 改 查功能 代码示例: 代码: urls.py from django.conf.urls import url from django.contrib impo ...
- python学习-- Django Ajax CSRF 认证
使用 jQuery 的 ajax 或者 post 之前 加入这个 js 代码:http://www.ziqiangxuetang.com/media/django/csrf.js /*======== ...
- django ajax 及批量插入数据 分页器
``` Ajax 前端朝后端发送请求都有哪些方式 a标签href GET请求 浏览器输入url GET请求 form表单 GET/POST请求 Ajax GET/POST请求 前端朝后端发送数据的编码 ...
- Django——Ajax
1.Ajax简介 AJAX(Asynchronous Javascript And XML)--"异步的JavaScript与XML". Ajax使用Javascript语言与服务 ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- Django ajax提交 登录
一.url from django.contrib import adminfrom django.urls import pathfrom appo1 import views urlpattern ...
- 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 ...
随机推荐
- LeetCode——542. 01 矩阵
给定一个由 0 和 1 组成的矩阵,找出每个元素到最近的 0 的距离. 两个相邻元素间的距离为 1 . 示例 1: 输入: 0 0 0 0 1 0 0 0 0 输出: 0 0 0 0 1 0 0 0 ...
- [ZJOI2019]语言（树链剖分+动态开点线段树+启发式合并）
首先,对于从每个点出发的路径,答案一定是过这个点的路径所覆盖的点数.然后可以做树上差分,对每个点记录路径产生总贡献,然后做一个树剖维护,对每个点维护一个动态开点线段树.最后再从根节点开始做一遍dfs, ...
- GpsNet2020 车联网平台
车联网产业是汽车.电子.信息通信.道路交通运输等行业深度融合的新型产业,是全球创新热点和未来发展制高点.车企通过部署车联网系统,为车主提供更好的出行服务体验,增加产品竞争力.依托华为云.边.端协同优势 ...
- for in 循环获取json中的键（key）与值（value）
一 .for in 循环 1.获取json中的键(key)与值(value): var data = {name:'张三',age:'20岁',sex:'男'}; for (var a in data ...
- string判断是否是正常的ip格式
废话不多说,上代码 bool isCurrectIP(char *ip) { if (ip == NULL) { return false; } char temp[4]; int count = 0 ...
- 如何处理xml文件！看看这里
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
- github傻瓜的食用方法
配置Git 首先在本地创建ssh key: 1 $ ssh-keygen -t rsa -C "your_email@youremail.com" 后面的your_email@yo ...
- Java生成随机图片验证码
前台html代码 [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 <div style="margin-top: 50px;&quo ...
- [LC] 442. Find All Duplicates in an Array
Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others ...
- git 忽略规则
# 以'#'开始的行,被视为注释. # 忽略掉所有文件名是 foo.txt的文件. foo.txt # 忽略所有生成的 html文件, *.html # foo.html是手工维护的,所以例外. !f ...