#######django与ajax######## 一、什么是ajax：ajax英文翻译过来就是异步的JavaScript和xml，即用JavaScript语言与服务器进行异步交互，传输的数据为xml，但是传输 的数据也有其他形式，比如json格式数据。 二、它的优势是:1、异步 2、局部刷新 异步提交：浏览器(也就是客户端)向服务器提交一个后，无需要等服务端给你响应，你可以继续提交请求 同步提交：向服务器提交请求，必须要服务端给你响应之后，你才能继续提交请求。 三、基于query的ajax请求，写一个登陆案例(还是再django项目里啊) html代码(伪代码)： <body> 用户名：<input type="text" id="name"><br> 密码：<input type="password" id="pwd"><br> <button id="btn">登陆</button> </body> <script> $('#btn').click(function () { $.ajax({ url:'/login/', type:'post', data:{ name:$('#name').val(), pwd:$('#pwd').val(), }, success:function (data) { alert(data) } }) }) </script> views代码： def login(request): if request.method == 'GET': return render(request,'login.html') name = request.POST.get('name') pwd = request.POST.get('pwd') if name == '朱宇' and pwd == '123': return HttpResponse('登陆成功') return HttpResponse('用户名密码错误') 路由关系： url(r'^login/$', views.login), ##其实我们不用ajax也一样可以写出来，那么向后台提交数据有哪几种方式： 1、get请求的url也可以 127.0.0.1:8080/login?name=zhuyu&password=123 2、post请求通过form表单提交数据，因为没有指定编码格式，默认使用urlencoded,也就是这种name=zhuyu&password=123 3、就是通过ajax进行数据交互 四、基于ajax进行文件上传 首先写通过form表单进行文件上传吧 html代码： <form action="" method="post" enctype="multipart/form-data"> 文件：<input type="file" name="file"><br> <input type="submit" value="提交" > </form> views代码： def files(request): if request.method == 'GET': return render(request, 'files.html') file = request.FILES.get('file') file_name = file.name download = r'D:django练习day78download' with open(download + '\' + file_name , 'wb') as f: for line in file: f.write(line) return HttpResponse('ok') ## 注意，我们上传文件必须指定编码为formdata，enctype="multipart/form-data" ## 那么我们基于ajax去上传文件，是不是也要指定特定的编码 html代码： <body> 文件：<input type="file" id="file"><br> <button id="btn" >提交</button> </body> <script> $('#btn').click(function () { var formdata = new FormData(); formdata.append('file',$('#file')[0].files[0]); $.ajax({ url:'/files/', type:'post', processData:false, contentType:false, data:formdata, success:function (data) { alert(data) } }) }) </script> views里代码和上面的一样。 ## 这里我解释下JavaScript中的几行代码： 1、基于form表单上传文件，需要指定编码格式，那么ajax一样也是，首先我们先创建一个FormData的一个对象 2、我们通过append方法，给对象传值append(value1,value2),相当于value1=value2 3、processData:false, #告诉jQuery不要去处理发送的数据 contentType:false, #告诉jQuery不要去设置Content-Type请求头 4、processData的值只能是布尔值，因为这时的data的值，是一个对象，所以不需要进行处理了 五、ajax一般用在于json格式 我直接写script里面的代码 <script> $('#btn').click(function () { var info = {'user':$('#user').val(), 'pwd':$('#pwd').val()} info = JSON.stringify(info) #将一个对象转成成json格式的字符串 $.ajax({ url:'', //url这里为空的话，默认向该页面发出ajax请求 type:'post', //type值为空的话，默认为get方法 contentType:'application/json', //以json格式传输 data:info, success:function (data) { console.log(data) } }) }) </script> ####上面就是前端发送json格式数据到后台 ####那后台服务端也可以向前端发送json数据 def login(request): if request.method == 'POST': import json info_dict = json.loads(str(request.body,encoding='utf-8')) # request.body里是二进制格式 if info_dict.get('user') == '朱宇' and info_dict.get('pwd') == 123: return JsonResponse({'status':1,'msg':'ok'}) return JsonResponse({'status':2,'msg':'用户名或密码错误'}) ####后台传过来json格式的数据，所以success中data应该就是一个字符串，我们只有将他转换为对象(python中字典) success:function (data) { data = JSON.parse(data) // 这时data就是对象了，我们就可以取到它的属性了 } # 那么有每一种方法，不让我自己出转换成对象呢？ dataType:'json' //这就是在ajax里设置的，它的功能就是上面那段代码 success:function (data) { console.log(typeof data) //值为object } 下面来总结下吧： 知识点不是很多，你从前台发过来的ajax请求，携带的数据你要知道是哪种类型。 1、文件的话，就先创建一个FormData对象,以key，value的位置，参传数进去 在ajax方法里，data对应的值就是这个FormData对象，所以在processData的值应该为false， contentType的值也为false(让jquery不设置请求头) 注意：它文件在后面中request.FILES里面，如果有其他input框所对应的value，它的值在POST中取 2、没有上传文件，就是form表单的里input的话，就直接传了，contentType默认为urlencoded编码方法 3、json格式数据，首先是把对象给造出来，并且把数据放里面，然后转换成json格式字符串， 这里contentType必须为'application/json'，这样它的的数据在request.body里，是二进制格式 4、还有就是，你在前端接收到后台json格式数据，可以在ajax那里写dataType:'json'，它会自动转换成对象