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

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

为了方便前后台交互,利用了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进行前后台交互的示例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Django解决ajax跨域访问问题

    这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现方法包括:使用django-cors-headers全局控制.使用JsonP,只能用于Get方法以及在views.py里设置响应头,只能控制单个接口,需要的朋友可以参考下. 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: 但是,Chrome浏览器提示错误: No 'Access-Control-Allow-Origin' header is present on the

  • Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

  • Python的Django应用程序解决AJAX跨域访问问题的方法

    引子 使用Django在服务器端写了一个API,返回一个JSON数据.使用Ajax调用该API: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width

  • 使用Python的Django框架结合jQuery实现AJAX购物车页面

    Django中集成jquery 首先,静态的资源通常放入static文件夹中: static/ css/ djquery.css samples/ hello.css js/ jquery-1.7.1.min.js samples/ hello.js 其中css和js都按照应用名称(这里是samples)划分文件夹,如果文件较多,还可以再划分子文件夹. Django通常使用模板来展现html,而且我们通常使用继承的模板,所以需要将共用的元素,比如全局的css,对jquery.js的引入等,写到b

  • 基于Django框架利用Ajax实现点赞功能实例代码

    概要: 要实现点赞功能,需要实现的有:谁进行的点赞.什么时候进行点赞.点赞的对象是谁.每一个对象的点赞数量是多少.点赞过后还需要能够取消点赞,为了是点赞后的信息能够及时的显示在前端页面,就需要使用Ajax来异步请求数据,实现实时显示. 下面话不多说了,来随着小编一起看看详细的介绍吧 模型分析: 创建的模型需要记录的数据有:点赞者.点赞对象.点赞时间.点赞的数量,由于前面三个属性主要用于记录点赞的状态,而点赞数量主要用于记录某篇文章的点赞数量,所以这里最好把点赞数量单独放在一个模型中.这里就创建了

  • django+js+ajax实现刷新页面的方法

    本文实例讲述了django+js+ajax实现刷新页面的方法.分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器.这样可以将服务器的维护工作暴漏在更加友好的界面操作,而非通过SecureCRT去敲指令.而且还能提供给策划运维人员来处理一些常规的事情. 这里将会讲解一个非常小的知识点: ① js如何发起一次请求 ② django如何响应请求 ③ js接收到响应如何区域刷新页面 js部分 我们先在html中定

  • django中的ajax组件教程详解

    Ajax(Asynchronous Javascript And XML)翻译成英文就是"异步Javascript和XML".即用Javascript语言与服务器进行异步交互,传输的数据为XML,(现在使用更多的是json数据). 向服务器发送请求的途径 1.浏览器地址栏 http://www.baidu.com 默认是get请求 2.form表单发送请求: GET请求 POST请求 3.a标签 href属性 默认是get请求 4.ajax() Ajax的特点 异步交互:客户端发送一个

  • Django Ajax的使用教程

    简介: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax! jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,现用它来做django中的ajax,所以先把jquey下

  • Django框架利用ajax实现批量导入数据功能

    本文实例为大家分享了网页中利用ajax实现批量导入数据功能的实现方法,供大家参考,具体内容如下 url.py代码: 复制代码 代码如下: url(r'^workimport/$', 'keywork.views.import_keywork', name='import_keywork') view.py代码: from keywork.models import DevData from django.http import JsonResponse #django ajax部分 def im

  • 基于Django与ajax之间的json传输方法

    前端使用ajax进行数据交互时: $.ajax({ cache: false, type: "POST", url: {% url ''%} data: $('#form').serialize(), async: true, success: function (data) { if (data.status == 'success') { $('#form')[0].reset(); alert("提交成功") } else if (data.status ==

  • Django中的ajax请求

    需求:实现ajax请求,在界面上任意地方点击,可以成功传参. 创建项目如下所示: settings.py文件的设置,这次我们除了要注册app和设置templates文件夹的路径,还要多设置一下static的路径,代码如下: STATICFILES_DIRS = [ os.path.join(BASE_DIR,'static') ] 首先,先对界面做处理,设置高为100%,然后引入我们所需要的文件static代码如下: 然后我们根据需求,创建一个点击事件,实现ajax请求,代码如下: 最后我们在视

  • django 通过ajax完成邮箱用户注册、激活账号的方法

    一.图片验证码 django-simple-captcha配置 1.在pycharm中,File====>Settings====>Project:项目名====>Project Interpreter====>+====>搜django-simple-captcha 选择0.55以上版本,然后点install package 按钮进行安装 2.项目名/urls.py中添加代码: from django.urls import path,include ...... from

  • django获取ajax的post复杂对象的实现方法

    一.django的request中post对象为空(即获取不到前台ajax传送的post对象) 1.将django的setting中的django.middleware.csrf.CsrfViewMiddleware注释即可. 2.或在from中添加{% csrf %},后台接受的方法上加语法糖:@csrf_exempt,注意添加引用模块 3.若以上操作后还是不行,则将form标签中的action属性去掉(这里只是针对ajax处理,非表单提交) 二.对于ajax的复杂对象,例如[{"id&quo

随机推荐