Ajax的作用
前后端分离的项目，需要交互，就要通过Ajax来完成交互
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）
Ajax的特性
1、同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求
2、异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求
3、局部刷新
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
扫描二维码关注公众号，回复：
5560515 查看本文章
PS：Ajax是一门前端的语言，和任何语言都可以做前后端交互
Ajax 的简单使用，发送get请求
urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/$',views.index),
url(r'^ajax/$',views.ajax_test)
]
views.py
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
def index(request):
return render(request,'index.html')
def ajax_test(request):
return HttpResponse('ok')
index.py
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{#导入css用link#}
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
{#导入js用script#}
<script src="/static/jquery-3.3.1.js"></script>
<title>我是index页面</title>
</head>
<body>
<h1>我的index页面</h1>
<p><button id="btn">点我看美女</button></p>
</body>
<script>
//jquery封装了一个方法，直接使用ajax方法，参数是一个字典形式
$('#btn').click(function () {
//点击按钮后往后台发ajax请求获取数据
$.ajax({
url:'/ajax/', //向一个地址发送请求
type:'get', //这个就是向上面地址发送的请求类型
success:function (data) { //当请求成功获取数据后相应这个函数,匿名函数里一定要有一个参数data,服务器返回的数据都放在data里
alert(data),
console.log(data) //这里是向终端返回数据
}
})
})
</script>
</html>
Ajax 简单使用，发送post请求
urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/$',views.index),
url(r'^ajax/$',views.ajax_test)
]
views
from django.shortcuts import render,HttpResponse,redirect
# Create your views here.
def index(request):
return render(request,'index.html')
def ajax_test(request):
if request.method == 'GET':
return HttpResponse('GET----------OK')
elif request.method == 'POST':
name = request.POST.get('name')
age = request.POST.get('age')
return HttpResponse(name + age)
index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="/static/jquery-3.3.1.js"></script>
<title>我是index页面</title>
</head>
<body>
<h1>我的index页面</h1>
<p><button id="btn">点我看美女</button></p>
</body>
<script>
$('#btn').click(function () {
//点击按钮后往后台发ajax请求获取数据
$.ajax({
url:'/ajax/',
type:'post',
data:{'name':'lqz','age':18}, //post请求需要携带数据，数据就放在变量data里
success:function (data) {
alert(data),
console.log(data)
}
})
})
</script>
</html>
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'^index/$',views.index),
url(r'^login/$',views.login
views.py
from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from django.http import JsonResponse #这个模块就是向前端返回json格式数据
# Create your views here.
def index(request):
return render(request,'index.html')
def login(request):
'''从数据库获取数据'''
dic = {'status': 100,'msg':None} #这个就是自定的状态码成功默认100，登录成功或失败都会放入这个字典返回给前端
if request.method == 'POST':
name = request.POST.get('name')
pwd = request.POST.get('pwd')
print(name,pwd)
# 从数据库获取数据
user = models.User.objects.filter(name=name,pwd=pwd).first()
# 这里逻辑就是成功和失败都会修改将字典中增加值，然后用json格式返回
if user:
dic['status'] = 100
dic['msg'] = '登录成功'
else:
dic['status'] = 101
dic['msg'] = '用户名或密码错误'
return JsonResponse(dic)
index.py
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="/static/jquery-3.3.1.js"></script>
<title>我是index页面</title>
<style>
#errors {
color: red;
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<h1>使用ajax实现登录功能</h1>
{#input里面为了让ajax获取到输入框输入的内容，需要设定id名 #}
<p>用户名：<input type="text" name="'name" id="name"></p>
<p>密码：<input type="password" name="pwd" id="pwd"></p>
<button id="btn">点击登录</button><span id="errors"></span>
</body>
<script>
//获取按钮，id就是#，如果是class就是.
$('#btn').click(function () {
$.ajax({
url:'/login/',
type:'post',
//取出输入框内中 写入的内容$('#name').val(),id就是#，class就是.
data:{'name':$('#name').val(),'pwd':$('#pwd').val()},
success:function (data) {
console.log(data)
//这里用if通过登陆吗判断登录成功与否
if (data.status==100){
//登录成功，则跳转至指定网页
//用前端的js代码跳转至指定的网页,location.href指定一个地址，则会跳转至指定的地址
location.href = 'http://www.baidu.com'
}else{
//朝id为errors的标签中写入数 据,这个就是局部刷新
$('#errors').text(data.msg)
}
}
})
})
</script>
</html>
models.py
from django.db import models
# Create your models here.
class User(models.Model):
'''建立一张表'''
name = models.CharField(max_length=32)
pwd = models.CharField(max_length=32)