當(dāng)前位置：
首頁(yè) >
（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)
發(fā)布時(shí)間：2024/10/12
32
豆豆
生活随笔
收集整理的這篇文章主要介紹了
（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
Ajax的作用
前后端分離的項(xiàng)目，需要交互，就要通過(guò)Ajax來(lái)完成交互
?
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語(yǔ)言與服務(wù)器進(jìn)行異步交互，傳輸?shù)臄?shù)據(jù)為XML（當(dāng)然，傳輸?shù)臄?shù)據(jù)不只是XML,現(xiàn)在更多使用json數(shù)據(jù)）
?
Ajax的特性
1、同步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，需要等待服務(wù)器響應(yīng)結(jié)束后，才能發(fā)出第二個(gè)請(qǐng)求
2、異步交互：客戶端發(fā)出一個(gè)請(qǐng)求后，無(wú)需等待服務(wù)器響應(yīng)結(jié)束，就可以發(fā)出第二個(gè)請(qǐng)求
3、局部刷新
?
AJAX除了異步的特點(diǎn)外，還有一個(gè)就是：瀏覽器頁(yè)面局部刷新；（這一特點(diǎn)給用戶的感受是在不知不覺(jué)中完成請(qǐng)求和響應(yīng)過(guò)程）
PS：Ajax是一門(mén)前端的語(yǔ)言，和任何語(yǔ)言都可以做前后端交互
?
Ajax 的簡(jiǎn)單使用，發(fā)送get請(qǐng)求
urls
from django.conf.urls import urlfrom 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">
{#導(dǎo)入css用link#}
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">
{#導(dǎo)入js用script#}
<script src="/static/jquery-3.3.1.js"></script>
<title>我是index頁(yè)面</title>
</head>
<body>
<h1>我的index頁(yè)面</h1>
<p><button id="btn">點(diǎn)我看美女</button></p>
</body>
<script> //jquery封裝了一個(gè)方法，直接使用ajax方法，參數(shù)是一個(gè)字典形式 $('#btn').click(function () {
//點(diǎn)擊按鈕后往后臺(tái)發(fā)ajax請(qǐng)求獲取數(shù)據(jù)
$.ajax({
url:'/ajax/', //向一個(gè)地址發(fā)送請(qǐng)求
type:'get', //這個(gè)就是向上面地址發(fā)送的請(qǐng)求類型
success:function (data) { //當(dāng)請(qǐng)求成功獲取數(shù)據(jù)后相應(yīng)這個(gè)函數(shù),匿名函數(shù)里一定要有一個(gè)參數(shù)data,服務(wù)器返回的數(shù)據(jù)都放在data里
alert(data),
console.log(data) //這里是向終端返回?cái)?shù)據(jù)
}
})
})
</script>
</html>
?
Ajax 簡(jiǎn)單使用，發(fā)送post請(qǐng)求
urls
from django.conf.urls import urlfrom 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頁(yè)面</title>
</head>
<body>
<h1>我的index頁(yè)面</h1>
<p><button id="btn">點(diǎn)我看美女</button></p>
</body>
<script>
$('#btn').click(function () {
//點(diǎn)擊按鈕后往后臺(tái)發(fā)ajax請(qǐng)求獲取數(shù)據(jù)
$.ajax({
url:'/ajax/',
type:'post',
data:{'name':'lqz','age':18}, //post請(qǐng)求需要攜帶數(shù)據(jù)，數(shù)據(jù)就放在變量data里
success:function (data) {
alert(data),
console.log(data)
}
})
})
</script>
</html>
?
ajax 實(shí)現(xiàn)登錄功能，前后端數(shù)據(jù)庫(kù)數(shù)據(jù)獲取以及局部刷新
urls.py
from django.conf.urls import urlfrom 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,redirectfrom app01 import models
from django.http import JsonResponse #這個(gè)模塊就是向前端返回json格式數(shù)據(jù)
# Create your views here.
def index(request):
return render(request,'index.html')
def login(request):
'''從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)'''
dic = {'status': 100,'msg':None} #這個(gè)就是自定的狀態(tài)碼成功默認(rèn)100，登錄成功或失敗都會(huì)放入這個(gè)字典返回給前端
if request.method == 'POST':
print(request.POST) #這個(gè)在做防止跨站請(qǐng)求偽造的時(shí)候要寫(xiě)，然后把后面的都注釋掉
name = request.POST.get('name')
pwd = request.POST.get('pwd')
print(name,pwd)
# 從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)
user = models.User.objects.filter(name=name,pwd=pwd).first()
# 這里邏輯就是成功和失敗都會(huì)修改將字典中增加值，然后用json格式返回
if user:
dic['status'] = 100
dic['msg'] = '登錄成功'
else:
dic['status'] = 101
dic['msg'] = '用戶名或密碼錯(cuò)誤'
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頁(yè)面</title>
<style>
#errors {
color: red;
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<h1>使用ajax實(shí)現(xiàn)登錄功能</h1>
{#input里面為了讓ajax獲取到輸入框輸入的內(nèi)容，需要設(shè)定id名 #}
{% csrf_token %} #這個(gè)就是通過(guò)中間件防止跨站請(qǐng)求偽造攻擊的，在頁(yè)面的請(qǐng)求中加入一個(gè)隨機(jī)的字符串
<p>用戶名：<input type="text" name="'name" id="name"></p>
<p>密碼：<input type="password" name="pwd" id="pwd"></p>
<button id="btn">點(diǎn)擊登錄</button><span id="errors"></span>
</body>
<script>
//獲取按鈕，id就是#，如果是class就是.
$('#btn').click(function () {
$.ajax({
url:'/login/',
type:'post',
//取出輸入框內(nèi)中 寫(xiě)入的內(nèi)容$('#name').val(),id就是#，class就是.
data:{'name':$('#name').val(),'pwd':$('#pwd').val()，'csrfmidlewaretoken':{{ csrf_token}}}, #上面登錄框加了scrf，這里的括號(hào)里要攜帶csrf的隨機(jī)碼到后臺(tái)
success:function (data) {
console.log(data)
//這里用if通過(guò)登陸嗎判斷登錄成功與否
if (data.status==100){
//登錄成功，則跳轉(zhuǎn)至指定網(wǎng)頁(yè)
//用前端的js代碼跳轉(zhuǎn)至指定的網(wǎng)頁(yè),location.href指定一個(gè)地址，則會(huì)跳轉(zhuǎn)至指定的地址
location.href = 'http://www.baidu.com'
}else{
//朝id為errors的標(biāo)簽中寫(xiě)入數(shù) 據(jù),這個(gè)就是局部刷新
$('#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)
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/shizhengquan/p/10546633.html
總結(jié)
以上是生活随笔為你收集整理的（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 房贷无力偿还退首付吗
- 下一篇： git创建/合并分支/删除分支/将修改后