.net post提交后接收返回数据_【实战演练】Python+Django网站开发系列12-前后端数据交互总结...

#本文欢迎转载，转载请注明出处和作者。

经过前面11篇，我们把功能简单版的学生选课系统开发完成了。关于前端往后端提交数据，以及后端如何往前端返回数据进行一下总结。

1、前端往后端提交数据

1.1 HTML原生<form>表单

html原生就带表单<form>标签，<form>标签提供设置method，可以使用get/post方法提交数据到后端，而如果加上action，则可以将数据指定提交到特定的url（即对应的后端函数）。对应submit按钮，需要将type="submit"，而不能是普通的type="button"。

<form method="post" action="/mopasswd/">
......
<button type="submit">submit</button>
</form>

1.2 jquery的.post

jquery的.post请求格式如下：.post是高层的操作，jQuery会自动封装调用底层的$.ajax。

$.post(url,{json格式的数据},function (条件) {
           具体业务函数
    },'返回的数据格式')

一般示例如下：

$.post('/changepassword/',{
    'username':$('#username').val(),
    'password':$('#password').val(),
    },function (res) {
            alert("添加成功！");
            window.location.reload();
    },'json')

1.3 jquery的.ajax

ajax是jquery另外一种向后台推送数据的方法，格式如下：$.ajax是一种通用的底层封装，$.ajax()请求数据之后，则需要使用回调函数，有beforeSend、error、dataFilter、success、complete等。

$.ajax(
{
    url:url,
    type:"post",
    data:{
    },
    beforeSend:function(){},
    async:true,
    success:function(){

    },
    error:function(){
    },
}

一般示例如下：

$.ajax(
{
    url:'/changepassword/',
    type:"post",
    data:{
        'username':$('#username').val(),
        'password':$('#password').val(),
    },
    beforeSend:function(){},
    async:true,
    success:function(res){
        alert("添加成功！");
        window.location.reload();
    },
    error:function(){
    },
}

1.4 3种方法的区别

原生的<form>有一个缺点，就是提交数据之后整个页面必定会刷新（刷新并且重新加载），没有办法做到局部刷新页面中的某些数据，而不重新刷新及加载整个页面。

而使用JavaScript/JQuery，使用.post与.ajax，可以做到像如下效果的按下按钮后，将某个<p>标签的value修改为特定字符串，弹出alert提示窗提示特定内容等效果，但又不刷新整个页面。

而至于.post与.ajax前面已经写得很清楚了，基本上.post是.ajax的一种简化的用法。

2、后端往前端返回数据与前端展示数据

2.1 后端往前端返回数据

后端往前端返回数据有各种render，render_to_response，JsonResponse等，看似不同，其实都是差不多的。

#render只能返回静态页面
render(request,'index.html')

#render_to_response可以返回页面与同时向前端返回数据
#locals()表示会把函数内所有的变量数据都会以json格式返回到前端
render_to_response（'index.html',locals()）
#或者可以按照json格式，指定返回给前端的变量与数值
render_to_response('index.html', {'userinfo':userinfo})

#JsonResponse不返回页面，仅以json格式向前端返回数据
JsonResponse({'result': result})

2.2 前端接收后端数据并展示

2.2.1使用python的mako语法

第一种方式就是使用python的mako语法，就是前面用表格遍历数据库查询结果，并且展示的{% for i in data %}{% endfor %}那种语法。

{% for i in data %}
    {{ i.xxx }}
    ......
{% endfor %}

这种用法好处是简单，易学易用易懂。缺点是只能在页面第一次加载的时候加载数据，页面不刷新/重新加载，无法修改数据。

2.2.2使用javascript/jquery

第二种方式是使用javascript/jquery，控制/修改变量的value。

#在form里面以<h1>标题格式，显示“这是一段文字”
var str = "<h1>这是一段文字</h1>"
$('.form').html(str)

#将id为"button1"的按钮的文字显示设置为“修改”
$('#button1').text('修改')

2.2.3两种方式的区别

前者用起来比较简单，没有太多的语法要求，但是只能在页面第一次加载的时候加载数据。后者可以不刷新页面进行数据的操控，但是语法相对比较复杂。