Ajax请求的几个小练习
准备工作
路由中做了分发:
re_path('^app01/',include('app01.url'))
app01中url.py文件的内容:
from django.urls import re_path
from app01 import views
urlpatterns = [
re_path('^index/$',views.index),
re_path('^test_ajax/$',views.test_ajax),
re_path('^cal/$',views.cal),
re_path('^login/$',views.login),
]
视图函数中第一条进入首页的函数
def index(request):
return render(request,'index.html')
models.py文件中新增一张数据表user
:
class User(models.Model):
name = models.CharField(max_length=32)
pwd = models.CharField(max_lenngth=32)
几个请求的小练习
以下只写app01应用的views与templates的模板文件的js代码——static文件的引入略去——大家注意写js前一定要先引入jQuery
点击按钮令下面的标签出现后台传送的文字
标签如下:
<button class='AJAX'>AJAX</button>
<p class='content'></p>
js内容如下:
$('.AJAX').click(function{
//发送ajax请求
$.ajax({
//请求的url,需要增加路由
//做了分发,路径要相应改一下
url:'app01/test_ajax',
type:'post',
data:{a:1,b:2},
success:function(data){
console.log(data)
//局部刷新
$('.content').html(data)
}
})
})
视图函数内容如下:
def test_ajax(request):
print(request.GET) #<QueryDict: {'a': ['1'], 'b': ['2']}>
return HttpResponse('OK!')
Ajax计算求和练习
标签如下:
<input id='n1' type='text'> + <input id='n2' type='text'> = <input id='n3' type='text'>
<input type='button' id='cal' value='计算'>
js内容如下:
$('#cal').click(function(){
$.ajax({
//计算的url,需要增加路由
//做了分发,路径要相应改一下
url:'/app01/cal/',
type:'post',
data:{
'n1':$('#n1').val(),
'n2':$('#n2').val()
},
//注意这里得加形参data,接收视图函数传过来的值
success:function(data){
//结果赋值
console.log(data)
$('#n3').val(data)
}
})
})
视图函数内容如下:
def cal(request):
print(request.POST) #<QueryDict: {'n1': ['1232'], 'n2': ['123']}>
n1 = int(request.POST.get('n1'))
n2 = int(request.POST.get('n2'))
ret = n1 + n2
return HttpRequest(ret)
Ajax登陆验证
标签如下:
<form action=''>
用户名: <input id='user' type='text'>
密 码: <input id='pwd' type='text'>
<input id='login_btn' type='button' value='确认'>
<span id='error'></span>
</form>
js内容如下:
$('#login_btn').click(function{
$.ajax({
//增加路由,注意分发的写法
url:'/app01/login/',
type:'post',
data:{
'user':$('#user').val(),
'pwd':$('#pwd').val()
},
success:function(data){
console.log(data) //得到的是json字符串 {"user": null, "msg": "wrong username or password"}
console.log(typeof data) //string类型
//反序列化
var dt = JSON.parse(data) //得到的是 object{}
console.log(dt) //{"user": null, "msg": "wrong username or password"}
console.log(typeof dt) //object
//注意下面对象调用了dt
if(dt.user){
location.href='http://www.baidu.com'
}
else{
$('#error').html(dt.msg).css({'color':'red','margin-left':'10px'})
}
},
})
})
视图函数内容如下:
def login(request):
print(request.POST) #<QueryDict: {'user': ['123'], 'pwd': ['222']}>
username = request.POST.get('user')
password = request.POST.get('pwd')
#返回的信息
ret = {'user':None,'msg':None}
##从数据库中找值去判断————注意数据库中的字段是name与pwd,还有这里要用first()
user = User.objects.filter(name=username,pwd=password).first()
if user:
ret['user'] = user.name
else:
ret['pwd'] = 'wrong username or password'
#给前端返回序列化后的数据
import json
return HttpRequest(json.dumps(ret))
效果演示: