django 用jquery ajax提交form 实现刷新部分页面
2015-04-11 19:30
218 查看
首先要引入jquery文件,可以引入在线的,也可以下载离线的 添加进自己staticfiles
这里演示的是添加离线的
然后写一个简单的表单
只有一个用户名和密码以及一个提交按钮的的简单表单 注意我这里的form的id是formadd 看起来非常简陋~
然后再添加我们的表单处理的jquery
如果你在settings里边没有注释掉
你的jquery里边需要添加上这句,详情参照自强学堂django ajax csrf
测试
其实我们在这个views.py 中可以做许多事情,比如把这个name和password字段进行验证了,或者存入数据库,然后返回一段真正的html代码,局部替换前端的页面,达到异步传输的效果
这里演示的是添加离线的
<script src={% static 'jquery/jquery.min.js' %}></script>注意这句是要添加到自己写的jquery脚本前边
然后写一个简单的表单
<form method="post" id="formadd"> {% csrf_token %} <label for="id_name">用户名</label> <input type="text" id="id_name"/> <label for = "id_password">密码</label> <input type="password" id="id_password"/> <button type="submit" id="submit" >提交</button> </form>
只有一个用户名和密码以及一个提交按钮的的简单表单 注意我这里的form的id是formadd 看起来非常简陋~
然后再添加我们的表单处理的jquery
如果你在settings里边没有注释掉
'django.middleware.csrf.CsrfViewMiddleware',
你的jquery里边需要添加上这句,详情参照自强学堂django ajax csrf
$.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, });然后整个jquery脚本,这里写的比较就简单主要突出与django的通信
<script src={% static 'jquery/jquery.min.js' %}></script>接下来写我们后端的view.py 中的后端处理函数
<script>
$(document).ready(function(){
$.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, });
$('#formadd').submit(function(){
var name = $("#id_name").val(); //获得form中用户输入的name 注意这里的id_name 与你html中的id一致
var password = $("#id_password").val(); //同上
$.ajax({
type:"POST",
data: {name:name, password:password},
url: "{% url 'blog:comments_upload' %}", //后台处理函数的url 这里用的是static url 需要与urls.py中的name一致
cache: false,
dataType: "html",
success: function(result, statues, xml){
alert(result); //成功时弹出view传回来的结果
},
error: function(){
alert("false");
}
});
return false;
});
});
</script>
def comments_upload(request): if request.method == 'POST': print "it's a test" #用于测试 print request.POST['name'] #测试是否能够接收到前端发来的name字段 print request.POST['password'] #用途同上 return HttpResponse("表单测试成功") #最后返会给前端的数据,如果能在前端弹出框中显示我们就成功了 else: return HttpResponse("<h1>test</h1>")由于有中文所以views.py 开头加上
#coding=utf8最后urls.py中加一条,(注意这是我的app中的urls.py)
url(r'^comments_upload/$', comments_upload, name='comments_upload'),然后fire your server
测试
Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. it's a test test testpassword后端console成功打印出我们的name和password字段
其实我们在这个views.py 中可以做许多事情,比如把这个name和password字段进行验证了,或者存入数据库,然后返回一段真正的html代码,局部替换前端的页面,达到异步传输的效果
相关文章推荐
- 怎么实现form表单提交后不重新刷新当前页面
- iframe标签实现form表单提交无页面刷新(不需要js)---解析
- django js实现部分页面刷新的示例代码
- django js实现部分页面刷新
- form表单target的用法,实现无刷新提交页面
- Jquery实现form表单提交后局部刷新页面的多种方法
- iframe标签实现form表单提交无页面刷新(不需要js)---解析
- 利用iframe实现提交表单是页面部分刷新
- jquery实现form表单提交后局部刷新页面的多种方法
- form提交不刷新页面、不用AJAX 也能实现类似"异步更新"效果
- jquery实现form表单提交后局部刷新页面的多种方法
- iframe标签实现form表单提交无页面刷新(不需要js)---解析
- form提交无刷新页面实现
- Form提交表单后页面刷新不跳转的实现
- Django1.6+jQuery Ajax + JSON 实现页面局部实时刷新
- iframe标签实现form表单提交无页面刷新(不需要js)---解析
- iframe标签实现form表单提交无页面刷新(不需要js)---解析
- post/get 提交form中的数据会刷新页面!
- 使用Dojo实现页面不刷新提交数据