文章目录
一、前端往后端提交数据
1.1 HTML原生表单
html原生就带表单标签,标签提供设置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另外一种向后台推送数据的方法,格式如下: . a j a x 是 一 种 通 用 的 底 层 封 装 , .ajax是一种通用的底层封装, .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种方法的区别
原生的有一个缺点,就是提交数据之后整个页面必定会刷新(刷新并且重新加载),没有办法做到局部刷新页面中的某些数据,而不重新刷新及加载整个页面。
而使用JavaScript/JQuery,使用.post与.ajax,可以做到像如下效果的按下按钮后,将某个
标签的value修改为特定字符串,弹出alert提示窗提示特定内容等效果,但又不刷新整个页面。
而至于.post与.ajax前面已经写得很清楚了,基本上.post是.ajax的一种简化的用法。
二、后端往前端返回数据与前端展示数据
2.1 后端往前端返回数据
后端往前端返回数据有各种render,render_to_response,JsonResponse等,看似不同,其实都是差不多的。
#render只能返回静态页面
render(request,'index.html')
#render返回静态页面和数据
#contex={‘userinfo’:userinfo}
render(request,'index.html',context)
#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两种方式的区别
前者用起来比较简单,没有太多的语法要求,但是只能在页面第一次加载的时候加载数据。后者可以不刷新页面进行数据的操控,但是语法相对比较复杂。