Django之Ajax传输数据

MTV与MVC模型

MTV与MVC都是模型，只不过MTV是django自己定义的，具体看一下他们的意思

MTV模型（django）

M:模型层（models.py）

T:templates文件夹

V：视图层（views）

MVC模型

M：模型层

V：视图层(views.py)

C:控制器(Controller) urls.py

总结：本质上django的MTV也是MVC

前后端传输数据编码格式

首先，在我们不指定传输数据的时候，默认的contentType都是urlencoded

urlencoded

　　对应的数据格式：name=jason&password=555

　　后端获取数据：request.POST　　

　　PS:django会将urlencded编码的数据解析自动放到request.POST

formdata

　　form表单传输文件的编码格式

　　后端获取文件格式数据：request.FILES

　　后端获取普通键值对数据：request.POST

application/json 

　　form表单不支持，Ajax支持

　　Ajax发送json格式数据

　　需要注意的点

　　　　编码与数据格式要一致

 

Ajax(重点掌握)

 

Ajax支持异步提交数据，局部刷新页面，这种情况我们在好多页面都会看到，那我们要如何做到呢？先来学习Ajax的基础语法~~~记住四兄弟即可

 

提交的地址(url)：控制数据的提交地址，不写默认往当前位置提交

 

提交的方式(type):默认是get,要将get请求换成post

 

提交的数据(data)：类似于字典的格式，字典具有一一标识的优点

 

回调函数(success)：function(data){}data接收到的后端传输的数据

 

基本结构如下：

 

<script>  //记得写在html页面的最下方或者是你写在js里面，然后引入
    $('绑定事件的id').click(function () {   //给你要让Ajax触发的按钮绑定一个事件
        $.ajax({                          //Ajax的固定写法，在{}里面写你的四兄弟
            url:'在这里写你的提交的路径',     //不写默认是当前页面提交
            type:'post' ,                 //将请求方式从默认的get改成post
            data:{},                      //这个固定是data,后面放的是字典的形式
            success:function (data) {     //回调函数，拿到的是提交过后的数据，就是后端处理过后的数据,不要忘记参数，这个参数就是接收后端处理过后的数据
                //对接受到的数据进行处理，做的是局部刷新操作
　　　　　　　　　　alert(123)

            }
        })                       
    })
</script>

 

自己尝试着写一个不跳转的动态页面，比如1+1=2

Ajax实现简单版页面局部刷新

我们首先需要的就是自己定义三个input框，然后动态获取到前两个框中的值，通过Ajax放到第三个input框中，代码演示如下

<input type="text" id="i1" >+<input type="text" id="i2" >=<input type="text" id="i3">
<button id="b1">点我点我</button>


<script>
$('#b1').click(function () {
    $.ajax({
        url:'/index/',
        type:'post',
        data:{
     
     'i1':$('#i1').val(),'i2':$('#i2').val()},
        success:function (data) {
            
            $('#i3').val(data)

        }
    })
})
</script>

html展示

后端数据处理

def index(request):
    if request.method=='PO