ajax

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

相关推荐