Ajax简介
前端把数据提交到后台的3种方式
1 浏览器到后台
2 Form表单到后台
3 Ajax到后台：js,jquery的封装
Ajax的两大优点
1 局部刷新：事件（带数据）-后台-响应
2 异步交互：请求提交后，无需等待服务端的响应，可直接发第二个请求
利用ajax向后台传送数据
1 初识ajax
2 基于ajax写一个简单的加法器
3 基于ajax的登录
4 向后台提交json格式的数据
5 上传文件
##views.py
from django.shortcuts import render,HttpResponse,redirect # Create your views here. def ajax_test(request): if request.method == 'POST': name=request.POST.get('name') password=request.POST.get('password') if name == 'lqz' and password == '123': return HttpResponse('登陆成功') return render(request,'ajax_test.html') def ajax_next(request): # name=request.GET.get('name') # password=request.GET.get('password') # if name == 'lqz' and password == '123': # return HttpResponse('登陆成功') # import time # time.sleep(10) # n1=request.GET.get('n1') # n2=request.GET.get('n2') # s=int(n1)+int(n2) # return HttpResponse(s) # name=request.GET.get('name') # password=request.GET.get('password') # if name == 'lqz' and password == '123': # return HttpResponse('1') # return HttpResponse('2') # if request.method=='POST': # print(request.body) # # 只处理了urlencoing编码的参数：name='lqz'&age=12 # # 前台提交json格式数据，需要自己处理 # ret=request.body.decode('utf-8') #json字符串 # import json # ret_dic=json.loads(ret) #字典 # if ret_dic['name']=='lqz' and ret_dic['pwd']=='123': # return HttpResponse('登陆成功') # else: # return HttpResponse('用户名密码错误') # name = request.POST.get('name') # print(name) name=request.POST.get('name') password=request.POST.get('password') myfile=request.FILES.get('myfile') print(name) print(password) file_name=myfile.name with open(file_name,'wb') as f: for line in myfile: f.write(line) return HttpResponse('1')<!DOCT<html lang="en">
Jsonresponse 自动把响应头变成 application/json 默认是text/html
<head> <meta charset="UTF-8"> <title>Title</title> {% load static %} <script src="{% static 'jquery.min.js' %}"></script> <!--导入jquery--> {# <script src="{% get_static_prefix %}jquery.min.js"></script>#} {# <script src="/static/jquery.min.js"></script>#} </head> <body> <form action="" method="post" enctype="multipart/form-data"> <p>name:<input type="text" name="name"></p> <p>password:<input type="password" name="password"></p> <p><input type="file" name="myfile" id="myfile"></p> <p><input type="submit" value="submit"></p> </form> <input type="text" name="n1" id="n1">+<input type="text" name="n2" id="n2">=<input type="text" name="sum" id="sum"> <button class="btn">ajax_提交</button> </body> <script> /* // 初识ajax $('.btn').click(function () { $.ajax({ url:'/ajax_next/', //提交到的url type:'get', //请求方式 data:{'name':'lqz','password':'123'}, //可以 携带数据发往后台 success:function (data) { //回调函数 异步 数据没回来这一步不会执行 alert(data) } }) }) */ /* // 基于ajax写一个简单加法器 $('.btn').click(function () { var n1=$('#n1').val(); //jquery取值 var n2=$('#n2').val(); $.ajax({ url:'/ajax_next/', //提交到的url type:'get', //请求方式 data:{'n1':n1,'n2':n2}, //可以 携带数据发往后台 success:function (data) { //回调函数 异步 数据没回来这一步不会执行 alert(data); $('#sum').val(data); } }); alert('wait') }) */ /* // 基于ajax的登录 $('.btn').click(function () { var name=$('[name="name"]').val(); var password=$('[name="password"]').val(); $.ajax({ url:'/ajax_next/', //提交到的url type:'get', //请求方式 data:{'name':name,'password':password}, //可以 携带数据发往后台 success:function (data) { //回调函数 异步 数据没回来这一步不会执行 if (data ==1){ location.href='https://www.baidu.com' }else { alert('用户名或密码错误') } } }) }) */ /* // 提交json格式的数据 $('.btn').click(function () { var name=$('[name="name"]').val(); var password=$('[name="password"]').val(); var ss = JSON.stringify({'name':name,'password':password}); //string var tt=JSON.parse(ss); //object $.ajax({ url:'/ajax_next/', //提交到的url type:'post', //请求方式 contentType:'application/json', //发送的编码格式
dataType:'json', //如果服务端发送的是json格式的数据，可以用这个自动转 默认是text/html格式的，纯字符串 需要和后端协商好
//这样就只能提交json格式的数据,django不能处理这种格式，要自己手动处理 只有request.body里有，request.GET/POST里没有了 // 默认是urlencoding编码格式 django可以处理 从request.GET/POST里有，可以取出来 data:JSON.stringify({'name':name,'password':password}), //转成json格式的字符串上传 传json格式的字符串和普通字符串都可以 success:function (data) { //回调函数 异步 数据没回来这一步不会执行 alert(data) } }) }) */ // ajax 上传文件 $('.btn').click(function () { var formdata = new FormData(); //跟表单提交:enctype="multipart/form-data" 一样 console.log(typeof formdata); //object formdata.append('name',$('[name="name"]').val()); formdata.append('password',$('[name="password"]').val()); formdata.append('myfile',$("#myfile")[0].files[0]); //数据放入fordata console.log(formdata); //formdata对象，已有数据 $.ajax({ url:'/ajax_next/', //提交到的url type:'post', //请求方式 processData:false, //告诉jQuery不要去处理发送的数据 contentType:false,// 告诉jQuery不要去设置Content-Type请求头 data:formdata, //提交数据 success:function (data) { //回调函数 异步 数据没回来这一步不会执行 alert(data) } }) }) </script> </html>
基于ajax实现仿博客园注册校验用户名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>register</title> {% load static %} <script src="{% static 'jquery.min.js' %}"></script> <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.min.css' %}"> </head> <body> <div class="container" style="margin-top: 80px;"> <div class="row"> <div class="col-md-6 col-md-offset-3"> {# <form action="" method="post">#} <p>name:<input type="text" name="name" class="form-control" id="n1"></p> <p>password:<input type="password" name="password" class="form-control" id="p1"></p> <p>confirm_password:<input type="password" name="confirm_password" class="form-control" id="p2"></p> {# <p><input type="submit" class="form-control btn btn-success" id="s1"></p>#} <p><button class="form-control btn btn-success" id="s1">提交</button></p> {# </form>#} </div> </div> </div> </body> <script> $('#s1').click(function () { var name=$('[name="name"]').val(); var password=$('#p1').val(); var confirm_password=$('#p2').val(); $.ajax({ url:'', type:'post', contentType:'application/json', data:JSON.stringify({'name':name,'password':password,'confirm_password':confirm_password}), dataType:'json', success:function (data) { console.log(data) } }) }) </script> </html>
from django.shortcuts import render,HttpResponse,redirect from django.http import JsonResponse import json def register(request): if request.method == 'POST': ret=request.body.decode('utf-8') print(ret) #json格式的str import json ret_dic = json.loads(ret) #反序列化 print(ret_dic) if ret_dic['name'] == 'xjj' and ret_dic['password'] == ret_dic['confirm_password'] == '123': return JsonResponse({'name':'xjj','password':'123'}) # return HttpResponse(json.dumps({'name':'xjj','password':'123'})) else: return JsonResponse({'name':'xjj','password':'123'}) # return HttpResponse('ok') return render(request,'register.html')