Django学习系列之结合ajax
AJAX简介
什么是AJAX
- AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML)
- 通过在后台于服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重载整个页面的情况下,对网页的某部分进行更新
AJAX参数
url:提交表单内容到views里的某个函数
type:提交方式(POST或GET)
data:提交到后台的数据,将自动转换成字符串格式
dataType:指定数据处理方式(XML,HTML,JSON,JSONP,Scrit,Text)
回调函数(callback):处理$.ajax()得到的数据
- beforesend:在发送请求之前调用,并且转入一个XMLHttpRequest作为参数
- error:在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
- dataFilter:在请求成功之后调用.传入返回的数据以及dataType参数的值.并且必须返回新的数据(可能是处理过的)传递给success回调函数
- success:当请求之后调用,传入返回后的数据,以及包含成功代码的字符串
- complate:当请求成功之后调用,无论成功或失败.传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串
一个简单的ajax示例
定义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),
]
定义views.py
from django.shortcuts import render,HttpResponse
import json
# Create your views here. def login(request): #通过request参数接收前端ajax传过来的数据(格式是:{"user": "111","pwd":"111"})
if request.method == 'POST':
ret = {'status':False}
user = request.POST.get('user',None)
pwd = request.POST.get('pwd',None)
if user == '' and pwd == '':
ret['status'] =True
return HttpResponse(json.dumps(ret),content_type="application/json") #这里是后端处理数据,如果前段输入正确就把status置为true
else:
ret['status'] = False
return HttpResponse(json.dumps(ret),content_type="application/json")
return render(request,'login.html')
定义login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="jsStayForm">
<div>
<input type="text" name="user"/>
</div>
<div>
<input type="password" name="pwd"/>
</div>
<input type="button" value="提交" onclick="SubmitForm()"/>
{% csrf_token %}
</form> <script src="/static/jquery.min.js"></script> <script>
function SubmitForm() {
$.ajax({
url: "{% 'url' 'add_ask' %}",
type: 'POST',
data: $('#jsStayForm').serialize() #自动获取id为jsStayForm表单的内容,然后序列化成json格式,比如{"user": "111","pwd":"111"},提交到后端
dataType: 'json',
success: function (callback) { #success函数是后端处理完数据之后,return回来一个http响应,callback是形参,接收后端传回来的数据,这里就是return HttpResponse(json.dumps(ret))之后就执行success部分的函数,
if (callback['status']) {
console.log('登录成功')
location.href = "http://www.baidu.com";
} else { alert('用户名或密码错误')
}
}
})
}
</script>
处理流程
- 当用户点击提交按钮之后,触发JavaScript的SubmitForm函数
- SubmitForm函数获取用户在input的标签输入的值,并组合成一个字典,例如:{"user":1111,"pwd":222}
- ajax把input_dict字典传到后端views中的login函数
- views中的login函数通过request这个形参接收ajax传过来的input_dict字段
- login函数进行判断,如果判断输入正确就把ret字典的status置为true("status":true),然后return给ajax,否则置为FALSE({"status":false}),然后return 给ajax
- ajax如果发现有状态吗为200的返回就执行success函数
- success函数通过callback这个形参接收后端给传过来的ret字典
ajax设置request对象header
背景:要给后端传数据,但不是把数据写在form表单里,是直接通过ajax提交数据,所以要在提交数据前设置request的header,加上csrf_token
ajax代码
function add_fav(current_elem, fav_id, fav_type){
$.ajax({
cache: false,
type: "POST",
url:"{% url 'org:add_fav' %}",
data:{'fav_id':fav_id, 'fav_type':fav_type},
async: true,
beforeSend:function(xhr, settings){
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success: function(callback) {
if(callback['status'] == 'fail'){
if(callback['msg'] == '用户未登录'){
window.location.href="{% url 'login' %}";
}else{
alert(callback['msg'])
}
}else if(callback['status'] == 'success'){
current_elem.text(callback['msg'])
}
},
});
}
Django学习系列之结合ajax的更多相关文章
- Django学习系列之Form基础
Django学习系列之Form基础 2015-05-15 07:14:57 标签:form django 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追 ...
- Django学习系列6：使用selenium测试用户交互
学习系列5中的单元测试有报错信息,这儿来编写functional_tests.py文件,扩充其中的功能测试 # File: functional_test.py # Author: Rxf # Cre ...
- Django学习系列之Form表单结合ajax
Forms结合ajax Forms的验证流程: 定义用户输入规则的类,字段的值必须等于html中name属性的值(pwd= forms.CharField(required=True)=<i ...
- django学习系列——python和php对比
python 和 php 我都是使用过,这里不想做一个非常理性的分析,只是根据自己的经验谈一下感想. 在web开发方面,无疑 php 更甚一筹. 从某种角度来说,php 就是专门为 web 定制的语言 ...
- Django学习系列之Python+Xadmin
项目树 引入xadmin pycharm在项目中创建存放xadmin的目录 右键项目名称-->pythonpackage-->输入名称:extra_app 拷贝xadmin代码到extra ...
- Django学习系列之django restframework
曾几何时,Ajax已经统治了Web开发中的客户端,而REST成为web世界中最流行的架构风格(architecture style).所以我们的选择变得很简单:前端ajax访问后端的RESTful A ...
- Django学习系列之CSRF
Django CSRF 什么是CSRF CSRF, Cross Site Request Forgery, 跨站点伪造请求.举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果 某个用户已经登录到 ...
- Django学习系列之Form验证
django表单基础 django表单分类 基于django.forms.Form:所有表单类的父类 基于django.forms.ModelForm:可以和模型类绑定的Form Form验证流程 定 ...
- Django学习系列13:Django ORM和第一个模型
ORM—对象关系映射器,是一个数据抽象层,描述存储在数据库中的表,行和列.处理数据库时,可以使用熟悉的面向对象方式,写出更好的代码. 在ORM的概念中,类对应数据库中的表,属性对应列,类的单个实例表示 ...
随机推荐
- vuex相关的知识
vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters, modules).它中的存储是响应式的,当store中 ...
- laravel如何自定义控制器目录
默认控制器在App\Http\Controllers目录下,如何自定义目录呢? 首先我们看一下laravel的请求周期 我们看一下服务提供者RouteServicePrivder文件中的一个函数 /* ...
- VS2008 ActiveX(ocx控件)的调试工具ActiveX Control Test Container安装说明
vs2008中的TSTCON( ActiveX Control Test Container )工具非自动安装,而是作为一个例程提供.所以应找到该例程,并编译: 如vs2008安装在默认路径则 1, ...
- maven release插件将一版本发布到仓库中时Return code is: 401, ReasonPhrase:Unauthorized
需要在maven的setting.xml中配置servers.server节点,其值为nexus的对应的repository的id以及用户名及密码 <servers> <server ...
- 21反射、动态代理、枚举、Filter
2018/10/08 1.反射 Constructor Class类的newInstance()方法是使用该类无参的构造函数创建对象, 如果一个类没有无参的构造函数, 就不能这样创建了,可以调用Cla ...
- [Luogu] P1865 A % B Problem
题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...
- bzoj1174 Toponyms
给你一个字符集合,你从其中找出一些字符串出来. 希望你找出来的这些字符串的最长公共前缀*字符串的总个数最大化. 第一行给出数字N.N在[2,1000000] 下面N行描述这些字符串,长度不超过2000 ...
- [Python3网络爬虫开发实战] 6-Ajax数据爬取
有时候我们在用requests抓取页面的时候,得到的结果可能和在浏览器中看到的不一样:在浏览器中可以看到正常显示的页面数据,但是使用requests得到的结果并没有.这是因为requests获取的都是 ...
- leetcode-240搜索二维矩阵II
搜索二维矩阵II class Solution: def searchMatrix(self, matrix, target): """ :type matrix: Li ...
- UvaLive 4863 Balloons（贪心）
题意: 给定n个队伍, 然后A房间有a个气球, B房间有b个气球, 然后给出每个队伍所需要的气球数量和到A B房间的距离, 求把气球全部送到每个队伍的最短距离. 分析: 在气球充足的情况下, 那么我们 ...