首先是接口代码：
from django.http import JsonResponse,HttpResponse import json def ax(request): if request.method == 'GET': return render(request,'ax.html') if request.method == 'POST': name = request.POST.get('name') age = request.POST.get('age') if name == 'admin' and age == '1': # 处理完数据之后需要返回给前台一个状态码或数据 data = {} data['code'] = 200 data['mes'] = '登录成功！' # 把状态信息以json格式返回给前台 # 1. # return JsonResponse(data) # 2. return HttpResponse(json.dumps(data)) else: data = {} data['code'] = 201 data['mes'] = '登录失败！' return HttpResponse(json.dumps(data))
然后是前台的html模板中的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入jquery文件 --> <script src="../static/jquery-1.10.2.min.js"></script> <!-- 导入jquery.cookie --> <script src="../static/jquery.cookie.js"></script> <title>Document</title> </head> <body> 昵称：<input type="text" id="name"><br> 年龄：<input type="text" id="age"><br> <!-- onclick,点击按钮时触发sub方法 --> <button onclick="sub()">登录</button> </body> <script> // 定义sub方法 function sub(){ // var定义name等于id为name的标签的值,val获取标签的值 var name = $('#name').val() var age = $('#age').val() // console.log把数据打印在控制台 console.log(name) console.log(age) // 发起Ajax请求 $.ajax({ url:'/ax/', // 要提交到的网址或接口 data:{ // 要提交的数据 'csrfmiddlewaretoken': $.cookie('csrftoken'), // 防跨站请求伪造令牌 name:name, age:age, }, type:'POST', // 提交方式 success:function(res){ // 请求成功时，回调回台的返回结果 console.log(res) var data = JSON.parse(res) // 解析前台返回数据 if (data.code==200){ // 如果返回码是200 alert('登录成功') // 弹窗提示登录成功 window.location.href='/con/' // 跳转到con接口 } if (data.code==201){ alert('登录失败') } } }) } </script> </html>
