Django之初识Ajax
1.简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
a.同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
b.异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程
2.示例
页面输入两个整数,通过AJAX传输到后端计算出结果并返回。
html文件名称为ajax_demo1.html,内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AJAX局部刷新实例</title>
</head>
<body> <input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/", //别忘了加双引号
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val()}, //object类型,键值形式的,可以不给键加引号
success:function (data) {
$("#i3").val(data);
}
})
})
</script>
</body>
</html>
views.py里面的内容:
def ajax_demo1(request):
return render(request, "ajax_demo1.html") def ajax_add(request):
#time.sleep(10) #不影响页面发送其他的请求
i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return JsonResponse(ret, safe=False)
#return render(request,'index.html') #返回一个页面没有意义,就是一堆的字符串,拿到了这个页面,你怎么处理,你要做什么事情,根本就没有意义
urls.py里面的内容
urlpatterns = [
...
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
...
]
启动django项目,然后运行看看效果,页面不刷新
3.AJAX常见应用情景
搜索引擎根据用户输入的关键字,自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。
a.整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
b.当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。
a.整个过程中页面没有刷新,只是局部刷新了;
b.在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;
4.AJAX的优缺点
优点:
1.AJAX使用JavaScript技术向服务器发送异步请求;
2.AJAX请求无须刷新整个页面;
3.因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
例子:一个登陆认证页面,登陆失败不刷新页面,提示用户登陆失败,登陆成功自动跳转到网站首页。
# html页面:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}">
</head>
{#<form action="{% url 'login' %}" method="post" >#}
{# {% csrf_token %}#}
{# 用户名: <input type="text" name="username">#}
{# 密码: <input type="password" name="password">#}
{# <input type="submit">#}
{##}
{#</form>#}
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub" >提交</button>
<span id="error" style="color: red;, font-size: 12;"></span>
</body>
<script src="{% static 'js/jquery.js' %}"></script>
<script>
$('#sub').click(function () {
var name = $('#username').val();
var pw = $('#password').val();
var csrf_token = $('input[name=csrfmiddlewaretoken]').val(); $.ajax({
url: {% url 'login' %}, # 向哪里提交数据
type: 'post', # 提交数据的方式
data:{'uname':name, 'pwd':pw, 'csrfmiddlewaretoken':csrf_token}, # 提交的数据 /object类型, 键值形式,键可以不加引号
success: function (response) { # response: 形参,
if(response.status){
$('#error').text('成功了');
location.href = response.home_url;
}else{
$('#error').text('失败了');
}
} })
}) </script> </html>
# views.py
from django.shortcuts import render, HttpResponse, redirect
from app01 import models
from django.http import JsonResponse
from django.urls import reverse
import json # Create your views here. def login(request):
if request.method == "GET":
return render(request, 'login.html')
else:
# form 表单提交数据
# uname = request.POST.get('username')
# pwd = request.POST.get('password')
# print(uname, pwd)
# return HttpResponse('ok') a = {'status': None, 'home_url': None}
uname = request.POST.get('uname')
pwd = request.POST.get('pwd')
print(uname, pwd) ret = models.UserInfo.objects.filter(name=uname, pwd=pwd)
if ret.exists():
a['status'] = True
a['home_url'] = reverse('home')
a_json = json.dumps(a)
# return HttpResponse(a_json, content_type='application/json')
return JsonResponse(a )
else:
return HttpResponse('file') def home(request): return render(request, 'home.html')
# urls.py from django.conf.urls import url
# from django.contrib import admin
from app01 import views
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^login/', views.login, name='login'),
url(r'^home/', views.home, name='home'), ]
登陆失败:
登陆成功:(会跳转到home页面)
Django之初识Ajax的更多相关文章
- Django补充及初识Ajax
Django创建一对多表结构 首先现在models.py中写如下代码: from django.db import models # Create your models here. class Bu ...
- Django(四) ORM 外键操作及初识Ajax
一.内容回顾 1.Django请求的生命周期: 路由系统 -> 视图函数(获取模板+数据 -> 渲染) -> 字符串返回给用户 2.路由系统: /index/ #-> 函数 ...
- Django中的Ajax
Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...
- django中的ajax组件
目录 django中的ajax 向服务器发送请求的途径 Ajax的特点 基于jquery实现的ajax请求 利用ajax实现计算器 利用ajax实现登陆认证 利用form表单进行文件上传 利用ajax ...
- Django框架 之 Ajax
Django框架 之 Ajax 浏览目录 AJAX准备知识 AJAX与XML的比较 AJAX简介 jQuery实现的ajax AJAX参数 AJAX请求如何设置csrf_token 序列化 一.AJA ...
- Django中的Ajax详解
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当 ...
- Django如何与ajax通信
示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...
- Django的日常-AJAX
目录 Django的日常-AJAX AJAX简介 AJAX与JQ的一个实例 AJAX与contentType AJAX传json格式 AJAX传文件 Django的日常-AJAX AJAX简介 首先A ...
- Django框架09 /ajax、crsf、settings导入
Django框架09 /ajax.crsf.settings导入 目录 Django框架09 /ajax.crsf.settings导入 1. ajax概述 2. ajax应用 3. ajax上传文件 ...
随机推荐
- navicat连接mysql报错1251的解决方法
1.新安装的mysql8,使用破解版的navicat连接的时候一直报错,如图所示: 2.网上查找原因发现是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql ...
- 基于C++Qt4开发的白鸽局域网聊天器
开源项目Github链接:https://github.com/u014427391/chitchat1.0 欢迎star (1)群聊主界面,有工具栏,工具栏功能分别是发送文件.打开音乐播放器.保存聊 ...
- Docker面试题
1.如何列出可运行的容器?docker ps 2.启动nginx容器(随机端口映射),并挂载本地文件目录到容器html的命令是?docker run -d -P --name nginx2 -v /h ...
- python连接Greenplum数据库
配置greenplum客户端认证 配置pg_hba.conf cd /home/gpadmin/gpdbdata/master/gpseg- vim pg_hba.conf 增加 host all g ...
- Ajax,JSONP以及跨域问题
没用过裸的Ajax 也没听过jsonp,也不了解跨域问题,emmm… 参考: http://www.runoob.com/ajax/ajax-tutorial.html https://www.lia ...
- 导入项目的时候报错Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha7
问题描述 今天在导入项目的时候报错: Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha ...
- java for循环里面执行sql语句操作,有效结果只有一次,只执行了一次sql mybatis 循环执行update生效一次 实际只执行一次
java后台controller中,for循环执行数据库操作,但是发现实际仅仅执行了一次,或者说提交成功了一次,并没有实际的个数循环 有可能是同一个对象导致的 可以仔细看一下下面两段代码有什么区别 p ...
- 使用MySQL组复制的限制和局限性
本节列出和解释了组复制相关的要求和限制. 1.组复制的要求 要使用组复制,每个MySQL节点必须满足以下条件: 1.1 基本要求 InnoDB存储引擎:数据必须存储在事务型的InnoDB存储引擎中.事 ...
- 【转】探讨:ASP.NET技术的学习顺序问题
摘要:很多人对于ASP.NET的入门和学习顺序比较迷茫,今天让我们一起来跟随作者的思路学习探讨ASP.NET的学习顺序问题,希望有所帮助. 如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 ...
- SQL语句害死人
最近在弄Android的SQLite,觉得其语法是在难搞~ 在这里把一些正确规范的实例贴出来,供参考 ';