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获取当前运行函数名称的方法实例代码
Apr 06 Python
Python使用win32com实现的模拟浏览器功能示例
Jul 13 Python
定制FileField中的上传文件名称实例
Aug 23 Python
Python2实现的图片文本识别功能详解
Jul 11 Python
Python多线程应用于自动化测试操作示例
Dec 06 Python
python五子棋游戏的设计与实现
Jun 18 Python
PyQt5响应回车事件的方法
Jun 25 Python
python和c语言的主要区别总结
Jul 07 Python
Django 拆分model和view的实现方法
Aug 16 Python
PyCharm无法引用自身项目解决方式
Feb 12 Python
Python scrapy爬取起点中文网小说榜单
Jun 13 Python
详解Python类和对象内容
Jun 22 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
PHPAnalysis中文分词类详解
2014/06/13 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
vue实现分页加载效果
2019/12/24 Javascript
python 实现归并排序算法
2012/06/05 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
python 循环while和for in简单实例
2016/08/16 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
python3中eval函数用法使用简介
2019/08/02 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
外企C语言笔试题
2013/11/10 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大一新生检讨书
2014/10/29 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书