ajax提交的url可以写model,Ajax请求的几个小练习

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

点击按钮令下面的标签出现后台传送的文字

标签如下：

AJAX

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) #

return HttpResponse('OK!')

Ajax计算求和练习

标签如下：

+ =

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) #

n1 = int(request.POST.get('n1'))

n2 = int(request.POST.get('n2'))

ret = n1 + n2

return HttpRequest(ret)

Ajax登陆验证

标签如下：

用户名：

密 码：

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) #

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))

效果演示：