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实现简单的计时器功能函数
Mar 14 Python
Python中使用PyQt把网页转换成PDF操作代码实例
Apr 23 Python
python利用标准库如何获取本地IP示例详解
Nov 01 Python
Python面向对象基础入门之设置对象属性
Dec 11 Python
python使用Plotly绘图工具绘制散点图、线形图
Apr 02 Python
如何在Cloud Studio上执行Python代码?
Aug 09 Python
python scrapy爬虫代码及填坑
Aug 12 Python
python绘制封闭多边形教程
Feb 18 Python
用sleep间隔进行python反爬虫的实例讲解
Nov 30 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
Feb 06 Python
python读取excel数据并且画图的实现示例
Feb 08 Python
Python实现8种常用抽样方法
Jun 27 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
小程序二次贝塞尔曲线实现购物车商品曲线飞入效果
2019/01/07 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
python面向对象 反射原理解析
2019/08/12 Python
Python坐标线性插值应用实现
2019/11/13 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
岗位职责风险防控
2014/02/18 职场文书
法制宣传口号
2014/06/16 职场文书
毕业证代领委托书
2014/09/26 职场文书
2014年科协工作总结
2014/12/09 职场文书
廉洁自律证明
2015/06/24 职场文书
详解Nginx 工作原理
2021/03/31 Servers
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript