django系列6--Ajax01 特点, 基本格式, 向前端发送数据
一.Ajax了解
AJAX（Asynchronous Javascript And XML）优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
优点:
1.ajax使用JavaScript技术向服务器发送异步请求
2.ajax请求无需刷新整个页面(浏览器局部刷新)
3.服务器响应内容不再是整个页面,而是页面中的部分内容,所以ajax性能高
二.Ajax使用
基本格式
//基于按钮点击事件实现的
<script src="{% static 'js/jquery.js' %}"></script>
<script>
$('#sub').click(function () {
//$.ajax({键值对参数})
$.ajax({
url:"{% url 'login' %}",
type:'post',
data:{'username':uname,'pwd':pwd,'csrfmiddlewaretoken':csrf_token},
success:function (response) { // response这个参数名字是自定义的
}
})
})
</script>
1.jQuery的实现
<button class="send_Ajax">send_Ajax</button>
<script>
$(".send_Ajax").click(function(){
$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"tom",password:123},
success:function(data){
console.log(data)
},
error: function (jqXHR, textStatus, err) {
console.log(arguments);
},
complete: function (jqXHR, textStatus) {
console.log(textStatus);
},
statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments);
},
'400': function (jqXHR, textStatus, err) {
console.log(arguments);
}
}
})
})
</script>
2.原生Js实现
var bt2 = document.getElementById("bt2");
bt2.onclick = function () {
// 原生JS
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=tom&password=123");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
三.使用ajax传送数据
用一个简单的登录验证实例来说明,用户名和密码正确提示成功.否则显示失败
发送的数据如果是字典时,其中的引号必须是双引号,否则传到前端使用会报错,
如{ “data”: data } , 不要用{‘data’: data}
1.使用 JsonResponse 来发送数据(最好)
这样发送的数据,前端就不用解析了,可以直接当作对象来使用
views.py
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models
# Create your views here.
def login(request):
if request.method == 'POST':
username = request.POST.get("username")
password = request.POST.get("password")
print(username, password)
ret = models.Userinfo.objects.filter(username=username,password=password)
print(ret)
a = {"status":None}
if ret:
a["status"] = True
print(a)
return JsonResponse(a)
else:
return HttpResponse("fail")
else:
return render(request,"login.html")
login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登陆</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
$.ajax({
url:"{% url 'login' %}",
type:"post",
data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
success:function (response) {
console.log(response, typeof response);
if (response.status){
$("span").text("登陆成功");
}else{
$("span").text("失败");
}
}
}
)
})
</script>
</body>
</html>
2.使用HttpResponse来向前端发送消息
HttpResponse加一个头就可以了,这样使用HttpResponse(data, content_type=content_type='application/json')
这样在前端html页面就不用解析json格式了,可以直接作为对象调用数据
views.py
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models
import json
# Create your views here.
def login(request):
if request.method == 'POST':
username = request.POST.get("username")
password = request.POST.get("password")
print(username, password)
ret = models.Userinfo.objects.filter(username=username,password=password)
print(ret)
a = {"status":None}
if ret:
a["status"] = True
print(a)
msg = json.dumps(a)
return HttpResponse(msg, content_type='application/json')
else:
msg = json.dumps(a)
return HttpResponse(msg, content_type='application/json')
else:
return render(request,"login.html")
login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登陆</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script> # 通过别名引入静态文件
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
$.ajax({
url:"{% url 'login' %}",
type:"post",
data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
success:function (response) {
console.log(response, typeof response);
if (response.status){
$("span").text("登陆成功");
}else{
$("span").text("失败");
}
}
}
)
})
</script>
</body>
</html>
3.引入json模块,发送json格式的消息
向前端发送的是json格式的消息,所以在前端要用JSON.parse()来反序列化字符串为JSON对象之后才能使用
views.py
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json
# Create your views here.
def login(request):
if request.method == 'POST':
username = request.POST.get("username")
password = request.POST.get("password")
print(username, password)
ret = models.Userinfo.objects.filter(username=username,password=password)
print(ret)
a = {"status":None}
if ret:
a["status"] = True
print(a) # {'status': True}
msg = json.dumps(a)
return HttpResponse(msg)
else:
return HttpResponse(a)
else:
return render(request,"login.html")
login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用户名: <input type="text" id="username">
密码: <input type="password" id="password">
<button id="sub">登陆</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_token = $("input[name=csrfmiddlewaretoken]").val();
$.ajax({
url:"{% url 'login' %}",
type:"post",
data:{"username":uname,"password":pwd,"csrfmiddlewaretoken":csrf_token},
success:function (response) {
console.log(response, typeof response);
msg = JSON.parse(response);
if (msg.status){
$("span").text("登陆成功");
}else{
$("span").text("失败");
}
}
}
)
})
</script>
</body>
</html>
实现结果:
django系列6--Ajax01 特点, 基本格式, 向前端发送数据的更多相关文章
- 网络相关系列之三：通过GET和POST方法发送数据
写在最前面:年少的安逸舒适在随着年龄的到来和现实生活的压迫总有一天会全数归还(事实上就是<无间道>中那句:"出来混,迟早要还的!") so fighting. 一.GE ...
- Django：前后端分离后联调给前端传数据
实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需 ...
- Python Django 前后端数据交互 之 后端向前端发送数据
Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...
- Django 系列博客（十六）
Django 系列博客(十六) 前言 本篇博客介绍 Django 的 forms 组件. 基本属性介绍 创建 forms 类时,主要涉及到字段和插件,字段用于对用户请求数据的验证,插件用于自动生成 h ...
- Django 系列博客（十四）
Django 系列博客(十四) 前言 本篇博客介绍在 html 中使用 ajax 与后台进行数据交互. 什么是 ajax ajax(Asynchronous Javascript And XML)翻译 ...
- Django 系列博客（十三）
Django 系列博客(十三) 前言 本篇博客介绍 Django 中的常用字段和参数. ORM 字段 AutoField int 自增列,必须填入参数 primary_key=True.当 model ...
- Django 系列博客（十一）
Django 系列博客(十一) 前言 本篇博客介绍使用 ORM 来进行多表的操作,当然重点在查询方面. 创建表 实例: 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日 ...
- Django 系列博客（十）
Django 系列博客(十) 前言 本篇博客介绍在 Django 中如何对数据库进行增删查改,主要为对单表进行操作. ORM简介 查询数据层次图解:如果操作 mysql,ORM 是在 pymysql ...
- Django 系列博客（八）
Django 系列博客(八) 前言 本篇博客介绍 Django 中的模板层,模板都是Django 使用相关函数渲染后传输给前端在显式的,为了想要渲染出我们想要的数据,需要学习模板语法,相关过滤器.标签 ...
随机推荐
- 【CentOS 6.5】QtCreator启动时关于dbus-1的错误解决方法
关于上篇文章留下的启动QtCreator提示:dbus_connection_can_send_type的错误,解决办法: 更新dbus版本来解决.. 首先去 http://dbus.freedesk ...
- selenium webdriver——JS滚动到指定位置
1.DOM滚动方法 1.scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...
- 1 数据库开发--MySQL介绍
1.数据库管理软件 C/S 并发.锁 :SQL语句.语法 基本管理和语法学习 一.介绍: mysql数据库管理软件: 套接字:服务端,客户端:客户端可访问服务端得数据 1.支持并发:操作得是共享得数据 ...
- JAXB--@XmlElementWrapper注解（二）
在JAXB标准中,@XmlElementWrapper注解表示生成一个包装 XML 表示形式的包装器元素. 此元素主要用于生成一个包装集合的包装器 XML 元素.因此,该注释支持以下两种形式的序列化. ...
- springmvc 数据验证 hibernate-validator --->对象验证
数据验证步骤: 1.测试环境的搭建: 2.验证器的注册 在springmvc.xml配置文件中加以下代码: 3.验证注解添加到对应实体类上 4.修改处理器 5.将验证失败信息写入到表单 index.j ...
- jekins测试环境自动化
最近搭建测试环境自动化,之前都是用机器猫.机器猫的流程大概是这样,开发打包上传到svn,给测试一个svn地址,测试到机器猫上传文件,然后再运行启动. 为了减去开发打包这个环节,所以专用jenkins. ...
- 利用NotePad++ 格式化代码(格式标准化) worldsing
在阅读别人的代码时往往会遇到格式很乱,阅读起来很费劲,如果手动改很容易出错,而且很费时间,这时可以借助一些专业的编辑器来格式化代码,NotePad++是一个轻量级的代码编辑器,占用内存少,运行速度快, ...
- Djanjo 的app 模板路径 静态文件 完整版登录 新手三件套 以及orm
一: django中app的概念: 一个项目可以包含多个应用(app,类似于模块,主页打开多个模块就是多个app) 创建了app,要在配置文件中注册 二:模板路径配置: 1 templates文件夹 ...
- [转]go中的main函数和init函数
Go里面有两个保留的函数:init函数(能够应用于所有的package)和main函数(只能应用于package main).这两个函数在定义时不能有任何的参数和返回值.虽然一个package里面可以 ...
- 一款好用的js插件及工具包
笔记:需要源码私信 script文件夹 script下的目录文件: 使用的效果,解决ie兼容性问题,好处多多!慢慢参考! 具体用法: 前端引入js,写必须要的js脚本! <script src= ...