Django 使用Ajax进行前后台交互的示例讲解


Posted in Python onMay 28, 2018

本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库。

为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交。

代码如下:

<!--利用获取的数据进行表单内容的填充-->
<script>
$("#soft_id").change(function(){
var softtype=$("#soft_id").find("option:selected").text();
var soft={'type_id':softtype}
$.ajax( {
 type: 'GET',
 url:'/data/soft-filter/{{family}}',
 dataType: 'json',
 data:soft,
 success: function( data_get ){
 build_dropdown( data_get, $( '#min_version' ), '请选择最低版本' );//填充表单
 build_dropdown( data_get, $( '#max_version' ), '请选择最高版本' );
 build_div(data_get,$('#soft_affected'));
 }
 }); 
 });
 var build_dropdown = function( data, element, defaultText ){
 element.empty().append( '<option value="">' + defaultText + '</option>' );
 if( data ){
 $.each( data, function( key, value ){
 element.append( '<option value="' + key + '">' + value + '</option>' );
 } );
 }
 }
 var build_div = function( data, element){
 if( data ){
 element.empty();
 $.each( data, function( key, value ){
  element.append(' <li class="clearfix"> <div class="todo-check pull-left"><input name="chk" type="checkbox" value="'+value+'" /></div> <div class="todo-title">'+value+' </div><div class="todo-actions pull-right clearfix"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="todo-complete"><i class="fa fa-check"></i></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="todo-edit"><i class="fa fa-edit"></i></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="todo-remove"><i class="fa fa-trash-o"></i></a></div> </li>');
 } );
 }
}
</script>
<!--选择并提交数据-->
<script>
//选择数据
function postselect (){
  var seleitem=new Array();
 $("input[name='chk']").each(function(i){
 if(!($(this).is( ":checked" )) ){
  seleitem[i]=$(this).val();
  // alert(seleitem[i]); 
}
});
//将排除后的数据提交到后台数据库
var soft={'type_id':seleitem}
$.ajax( {
 type: 'POST',
 url:'/data/soft-submit',
 dataType: 'json',
 data:soft,
 success: function( data_get ){
 }
 });
}
</script>

部分html代码为:

<div style="overflow: hidden;" >
      <ul id='soft_affected' class="todo-list sortable">
      </ul>
 </div>

views.py中处理请求和响应代码:

def soft_submit(request):
 if request.is_ajax():
  id=request.POST.get('type_id')
 return HttpResponse("success")
def soft_filter(request,fami):
 softtype=''
 ajax_release_version=[]
 release_version=[]
 if request.is_ajax():
  softtype=request.GET.get('type_id')
  soft_type=SoftTypeRef.objects.using('vul').filter(description=softtype)
  soft_tp_id=0
  for i in soft_type:
   soft_tp_id= i.soft_type_id
  web_soft=SoftWeb.objects.using('vul').filter(soft_type_id=soft_tp_id)
  for i in web_soft:
   ajax_release_ver=i.release_version
   ajax_release_version.append(ajax_release_ver)
  return HttpResponse(json.dumps(ajax_release_version), content_type='application/json')

以上这篇Django 使用Ajax进行前后台交互的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python使用win32com在百度空间插入html元素示例
Feb 20 Python
python测试mysql写入性能完整实例
Jan 18 Python
Python3处理HTTP请求的实例
May 10 Python
Python3实现的Mysql数据库操作封装类
Jun 06 Python
python无限生成不重复(字母,数字,字符)组合的方法
Dec 04 Python
python获取时间及时间格式转换问题实例代码详解
Dec 06 Python
浅谈python 中类属性共享的问题
Jul 02 Python
如何用Python做一个微信机器人自动拉群
Jul 03 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
Aug 26 Python
pip install python 快速安装模块的教程图解
Oct 08 Python
django模型动态修改参数,增加 filter 字段的方式
Mar 16 Python
python中pickle模块浅析
Dec 29 Python
Python实现爬虫爬取NBA数据功能示例
May 28 #Python
Django+Ajax+jQuery实现网页动态更新的实例
May 28 #Python
Python实现合并两个列表的方法分析
May 28 #Python
django js实现部分页面刷新的示例代码
May 28 #Python
Django项目中用JS实现加载子页面并传值的方法
May 28 #Python
Python面向对象类继承和组合实例分析
May 28 #Python
django传值给模板, 再用JS接收并进行操作的实例
May 28 #Python
You might like
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2016/06/22 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
用python实现名片管理系统
2020/06/18 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
大学生自荐信
2013/12/11 职场文书
给酒店员工的表扬信
2014/01/11 职场文书
党支部综合考察材料
2014/05/19 职场文书
远程教育学习心得体会
2016/01/23 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang