Django--10 列表按钮点击弹出模态框Modal

最新推荐文章于 2023-03-03 12:48:56 发布

liuning2008

最新推荐文章于 2023-03-03 12:48:56 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Django 文章标签： html5 python django

本文链接：https://blog.youkuaiyun.com/liuning2008/article/details/113830159

Django 专栏收录该内容

11 篇文章

订阅专栏

这篇博客详细描述了一个使用Ajax实现的前端交互过程，包括点击按钮触发确认框、弹出modal对话框进行数据输入，以及后台接收并处理ajax请求的流程。在modal对话框中，用户可以填写姓名、年龄、性别和实验员信息，提交后通过Ajax发送到后台。视图部分展示了如何处理这些POST数据。博客着重讨论了前端与后端数据传递的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 功能展示

点击按钮“处理”，弹出确认框

点击按钮“确定”，弹出modal框

点击按钮“确定”，发送ajax请求

后台接收到ajax请求，将接收到的数据打印

2 模态对话框html页面

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document" id="stuadd_modal">
          <div class="modal-content">

              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                          aria-hidden="true">×</span></button>
                  <h4 class="modal-title" id="myModalLabel">处理</h4>
              </div><!-- end .modal-header -->
              <div class="modal-body">

                  <form class="form-horizontal">

                      <div class="form-group">
                          <label for="stu_name" class="col-sm-2 control-label">姓名</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="stu_name" name="stu_name" placeholder="name">
                          </div>
                      </div>
                      <!-- group  -->
                      <div class="form-group">
                          <label for="stu_age" class="col-sm-2 control-label">年龄</label>
                          <div class="col-sm-10">
                              <input type="text" class="form-control" id="stu_age" name="stu_age" placeholder="age">
                          </div>
                      </div>
                      <!-- group  -->

                      <div class="form-group">
                          <label class="col-sm-2 control-label">性别</label>
                          <div class="col-sm-5">
                              <label class="radio-inline">
                                  <input type="radio" name="gender" id="inlineRadio1" value="1" checked="checked"> 男
                              </label>
                              <label class="radio-inline">
                                  <input type="radio" name="gender" id="inlineRadio2" value="0"> 女
                              </label>
                          </div>
                      </div><!-- group  -->

                      <div class="form-group">
                          <label for="class_name" class="col-sm-2 control-label">实验员</label>
                          <div class="col-sm-3">
                              <select class="form-control" id="class_name" name="class_name">
                                  {% for syy in syy_list %}
                                      <option>{{ syy }}</option>
                                  {% endfor %}
                              </select>
                          </div>
                      </div><!-- group  -->

                  </form><!-- end form -->
              </div><!-- end .modal-body  -->

              <div class="modal-footer">
                  <div class="col-lg-6">
                      <span id="modal_error_msg"  style="color: red"></span>
                  </div>
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-primary" id="stuadd_modal_submit">确定</button>
              </div><!-- end .modal-footer-->

          </div> <!--end .modal-content -->
      </div> <!-- end .modal-dialog-->
  </div>
<!-- end .modal fade -->

3 js部分代码

3.$('#wtds_table tbody').on( 'click', 'button#passrow', function () {

       var data = table.row( $(this).parents('tr') ).data();
       if(confirm("是否确认通过这条信息"))
       {
           {#alert(  'You clicked on ' +data[0]+ '\'s row'  );#}
           $('#myModal').modal('show');
           $('#stuadd_modal_submit').click(function () {
               var stu_data = {};
               $('#stuadd_modal').find('input,select').each(function () {
                   var stu_key = $(this).attr('name');
                   var stu_value = $(this).val();
                   if (stu_key == 'gender') {
                       if (!$(this).prop('checked')) {
                           return true;
                       }
                    }
                   stu_data[stu_key] = stu_value;
                });
               {#console.log(stu_data); //{stu_name: "aa", stu_age: "bb", gender: "1", class_name: "1"}#}

               var post_data={
                   csrfmiddlewaretoken:'{{ csrf_token }}',
                   stu_name:stu_data['stu_name'],
                   stu_age:stu_data['stu_age'],
                   stu_data:stu_data['gender'],
                   stu_data:stu_data['class_name'],

                   wtnumber:data[0],
               };
               $.ajax({
                   url:'/shiyan/ajax_sy/',
                   type:'POST',
                   data:post_data,
                   success:function (args,status) {
                       var respone_dict=args;
                       if(respone_dict.status) {
                           $('#modal_error_msg').text('处理成功！');
                           window.location.reload();
                        }else{
                           $('#modal_error_msg').text(respone_dict.msg);
                        }
                   }
                })

           });


           {#alert(  'You clicked on ' +data[0]+ '\'s row'  );#}
           {#var post_data={#}
           {#    csrfmiddlewaretoken:'{{ csrf_token }}',#}
           {#    wtnumber:data[0],#}
           {# };#}
           {##}
           {#$.ajax({#}
           {#    type:"POST",#}
           {#    data:post_data,#}
           {#    url:"/shenhe/ajaxdata_shpass/",#}
           {#    dataType:"json",#}
           {#    success:function (res,status) {#}
           {#        if(res.data){#}
           {#            table.row().remove();//删除这行的数据#}
           {#            window.location.reload();#}
           {#        }#}
           {#    },#}
           {#    error:function(err){#}
           {#        alert("获取数据失败");#}
           {#    }#}
           {# } ) #}
        }

   });

4 视图部分

def ajax_sy(request):
    response_dict = {"status": True, "msg": None}
    try:
        stu_name = request.POST.get('stu_name')
        stu_age = request.POST.get('stu_age')
        gender = request.POST.get('gender')
        class_id = request.POST.get('class_name')
        wtnumber = request.POST.get('wtnumber')
        print(stu_name,stu_age )
    except Exception as e:
        response_dict['status'] = False
        response_dict['msg'] = str(e)

    return JsonResponse(response_dict)