django AJAX
MTV与MVC(了解)
MTV模型(django):
M:模型层(models.py)
T:templates
V:views
MVC模型:
M:模型层(models.py)
V:视图层(views.py)
C:控制器(Controller) urls.py
本质:django的MTV也是MVC
多对多表三种创建方式
1.django自动帮我们创建
class Book（models.Model): name = models.CharField(max_length=32) author = models.ManyToManyField(to='Author') class Author(models.Model): name = models.CharField(mac_length=32)
2.纯手动创建第三张表
class Book(models.Model): name = models.CharField(max_length=32) class Author(models.Model): name = model.CharField(max_length=32) class Book2Author(models.Model): book = model.ForeignKey(to='Book') author = models.ForeignKey(to='Author') info = models.CharField(max_length=32)
3.半自动创建第三张表（可扩展性高，并且能够符合ORM查询）
class Book(models.Model): name = models.CharField(max_length=32) 第三种表创建的方式 authors = models.ManyToManyField(to='Author',through='Book2Author',through_fields=('book','author')) class Author(models.Model): name = models.CharField(max_length=32) 第三种表创建的方式 book = models.ManyToManyField(to='Book',through='Book2Author',through_fields=('author','book')) class Book2Author(models.Model): book = models.ForeignKey(to='Book') author = models.ForeignKey(to='Author') info = models.CharField(max_length=32)
前后端传输数据编码格式contentType
urlencoded
对应的数据格式：name = jason&password=666
后端获取数据: request.POST
ps: django会将urlencoded编码的数据解析自动放到request.POST
formdata
form表单传输文件的编码格式
后端获取文件格式数据：request.FILES
后端获取普通键值对数据：request.POST
application/json
ajax发送json格式数据
需要注意的点
编码与数据格式要一致
ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
局部刷新：页面的某一特定区域进行刷新，其余地方不会刷新
示例：页面输入两个整数，通过AJAX传输到后端计算结果并返回
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="b1">Ajax Test</button> <script src="/static/jquery-3.3.1.min.js"></script> <script> $('#b1').click(function () { $.ajax({ url:'', type:'POST', data:{i1:$('#i1').val(),i2:$('#i2').val()}, success:function (data) { $('#i3').val(data) } }) }) </script> </body> </html>
def ajax_test(request): if request.method=='POST': i1=request.POST.get('i1') i2=request.POST.get('i2') ret=int(i1)+int(i2) return HttpResponse(ret) return render(request,'ajax_test.html')
from django.conf.urls import url from app01 import views urlpatterns=[ url(r'^ajax_test/',views.ajax_test), ]
前端有哪些方式可以朝后端发请求
浏览器窗口手动输入网址 get请求 a标签的href属性 get请求 form表单 get/post请求(默认是get请求) ajax get/post请求
ajax基本语法
提交的地址(url)
提交的方式(type)
提交的数据(data)
回调函数(success)
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
success:function (data) {
$("#i3").val(data);
}
})
})
ajax默认传输数据的编码格式也是urlencoded
前后端传输数据，你不能骗人家，数据是什么格式就应该告诉别人是什么格式(数据与编码要一一对应)
ajax传输json格式数据
$('#d1').click(function () { $.ajax({ url:'', // url参数可以不写，默认就是当前页面打开的地址 type:'post', contentType:'application/json', data:JSON.stringify({'name':'jason','hobby':'study'}), success:function (data) {}})});
ajax传输文件
$('#d1').click(function () { let formdata = new FormData(); // FormData对象不仅仅可以传文件还可以传普通的键值对 formdata.append('name','jason'); // 获取input框存放的文件 //$('#i1')[0].files[0] formdata.append('myfile',$('#i1')[0].files[0]); $.ajax({ url:'', type:'post', data:formdata, // ajax发送文件需要修改两个固定的参数 processData:false, // 告诉浏览器不要处理我的数据 contentType:false, // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象 // 回调函数 success:function (data) { alert(data) } }) });
form表单与ajax异同点
1.form表单不支持异步提交局部刷新
2.form表单不支持传输json格式数据
3.form表单与ajax默认传输数据的编码格式都是urlencoded
批量插入数据
l = []
for i in range(10000):
l.append(models.Book2(name='第%s本书'%i))
models.Book2.objects.bulk_create(l) # 批量插入数据
补充:<li><a href="?page=1">1</a></li> # 自动补全当前路径
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Tonny",
"password": 123456,
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
},
success: function (data) {
console.log(data);
}
})
方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意：需要引入一个jquery.cookie.js插件。
$.ajax({ url: "/cookie_ajax/", type: "POST", headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrf_token，并设置ajax请求头 data: {"username": "Q1mi", "password": 123456}, success: function (data) { console.log(data); } })
方式3
或者用自己写一个getCookie方法：
function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie !== '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } var csrftoken = getCookie('csrftoken');
每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。
function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); } $.ajaxSetup({ beforeSend: function (xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrftoken); } } });
