1、前端有哪些方式可以向后端发请求
浏览器窗口手动输入网址 get请求
a标签的href属性 get请求
form表单 get/post请求(默认是get请求)
ajax get/post请求
2、ajax的特点
异步提交
局部刷新
3、ajax基本语法
// 提交的地址(url)
// 提交的方式(type)
// 提交的数据(data)
// 回调函数(success)
// 例1：前端往后端发送数据，后端处理后再返回
// urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^index/', views.index),
]
// views.py
from django.shortcuts import render, HttpResponse
# Create your views here.
def index(request):
if request.method == 'POST':
print(request.POST)
name = request.POST.get("name")
password = request.POST.get("password")
return HttpResponse("name:" + name + " " + "password:" + password)
return render(request, 'index.html')
// index.html <body> <button id="d1">选我</button> <script> $('#d1').click(function () { $.ajax({ // 提交的地址 url:'/index/', // 提交的方式 type:'post', // 提交的数据 data:{'name':'jason','password':'123'}, // 回调函数 // data接收的就是异步提交返回的结果 success:function (data) { alert(data) } }) }) </script> </body>
点击按钮后，结果：
例2：前端有三个输入框，前两个框中的值相加，显示在第三个框中
views.py
def index(request): if request.method == 'POST': i1 = request.POST.get("i1") i2 = request.POST.get("i2") res = int(i1) + int(i2) return HttpResponse(res) return render(request, 'index.html')
index.html
<body> <input type="text" id="i1">+<input type="text" id="i2">=<input type="text" id="i3"> <button id="d1">相加</button> <script> $('#d1').click(function () { $.ajax({ url:'', //url参数可以不写，默认就是当前页面打开的地址 type:'post', data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, success:function (data) { $('#i3').val(data) } }) }) </script> </body>
结果：
4、ajax传输json格式的数据
前后端传输数据，数据是什么格式就应该说明是什么格式(数据与编码要一一对应)
views.py
import json def index(request): if request.method == 'POST': # json格式的数据存储在了request.body中 print(request.body) data = request.body res1 = data.decode('utf-8') # 转成字典 res2 = json.loads(res1) print(res2, type(res2)) return HttpResponse('OK') return render(request, 'index.html')
index.html
<body> <button id="d1">点击</button> <script> $('#d1').click(function () { $.ajax({ url:'', type:'post', contentType:'application/json', // 说明数据格式 data:JSON.stringify({'name':'jason','hobby':'study'}), success:function (data) { {#$('#i3').val(data)#} alert(data) } }) }) </script> </body>
结果：
pycharm中：
5、ajax传输文件数据
index.html
<body> <input type="file" name="myfile" id="i1"> <button id="d1">点击传输</button> <script> $('#d1').click(function () { // ajax传输文件需要借助于内置对象FormData let formdata = new FormData(); formdata.append('name', 'jason'); // 获取input框存放的文件 formdata.append('myfile', $('#i1')[0].files[0]); $.ajax({ url:'', type:'post', data:formdata, // ajax发送文件需要修改两个固定的参数 // 1.告诉浏览器不要处理我的数据 processData:false, // 2.不要用任何编码，就用我formdata自带的编码格式,Django能够自动识别该formdata对象 contentType:false, // 回调函数 success:function (data) { alert(data) } }) }); </script> </body>
views.py
def index(request): if request.method == 'POST': print(request.POST) print(request.FILES) return HttpResponse('文件收到了') return render(request, 'index.html')
结果：
6、form表单与ajax异同点
1.form表单不支持异步提交局部刷新
2.form表单不支持传输json格式数据
3.form表单与ajax默认传输数据的编码格式都是urlencoded
7、MTV和MVC
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