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实现将DOC文档转换为PDF的方法
Jul 25 Python
Python下的常用下载安装工具pip的安装方法
Nov 13 Python
详解python时间模块中的datetime模块
Jan 13 Python
python实现简单tftp(基于udp协议)
Jul 30 Python
python实现自动登录后台管理系统
Oct 18 Python
python变量命名的7条建议
Jul 04 Python
python系列 文件操作的代码
Oct 06 Python
python列表切片和嵌套列表取值操作详解
Feb 27 Python
详解python算法常用技巧与内置库
Oct 17 Python
python Polars库的使用简介
Apr 21 Python
Python开发工具Pycharm的安装以及使用步骤总结
Jun 24 Python
用PYTHON去计算88键钢琴的琴键频率和音高
Apr 10 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 eval函数用法总结
2012/10/31 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
php生成圆角图片的方法
2015/04/07 PHP
Symfony2开发之控制器用法实例分析
2016/02/05 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
javaScript实现滚动条事件详解
2020/03/24 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python实现ftp客户端示例分享
2014/02/17 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
用python写PDF转换器的实现
2020/10/29 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
思想政治自我鉴定
2013/10/06 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL