弹窗修改数据临时解决方法 + ajax

一.重点

1.Ajax 提交

$('#ajax_submit').click(function () {
        $.ajax({
            url: "/app01/ajax/",
            type: "POST",
            data: {'id': $('#id_id').val(),'title': $('#title_id').val(),'account_id':$('#account_id').val()},
            success:function (data) {
                //alert（data）;//成功返回
                if(data == "ok" ){
                    location.reload();
                }else{
                    alert(data) //一般是显示
                }

            }
        })
    })

2.后台接口处理Post请求

见下面源码

3.html里面需要隐藏id，用来更新数据使用。

<tr>
                  <!--隐藏一个标签放数据，提交表单使用-->
                <td tname="title">{{obj.title}}<a tname="id" style="display: none">{{obj.id}}</a></td>
                <td tname="account">{{ obj.account }}</td>
                <td tname="operator"><a href="javacript:void(0)" onclick="test11(this)" class="edit1"><span class="glyphicon glyphicon-edit" data-toggle="modal" data-target=".bs-example-modal-lg" aria-hidden="true"></span></a></td>
            </tr>

4.获取数据到模态对话框

<td tname="operator"><a href="javacript:void(0)" onclick="test11(this)" class="edit1">



    function test11(obj) {

        var v = $(obj).parent().parent().find('[tname]');
        console.log(v);
        v.each(function () {
            var t_name = $(this).attr('tname'); //查出tname的值
            var t_value = $(this).text()  //查出text值
            var ide = "'#"+ t_name + "'"
            $('#popup').find('input[tname="' + t_name + '"]').val(t_value); //使用ID查找
            //$(ide).val(t_value);  //字符串拼接，通过对应的属性名 把值赋value
            })
    }

二.源码

python 的视图

class Ajax(View):
    def post(self, request,**kwargs):
        """提交表单"""
        print(request,"00000000000000")
        id=request.POST.get("id")
        title=request.POST.get("title")
        account_id=request.POST.get("account_id")
        if title and len(title) > 3:
            print("id:",id,"title:",title,"account_id:",account_id)
            print("1111111111111")
            v=Article.objects.filter(id=id)
            print(v)
            v.update(title=title,account_id=account_id)
            return HttpResponse("ok")
        else:
            print("2222222222222")
            return HttpResponse("不能为空")

python的url

    url(r'^ajax/$',views.Ajax.as_view(),name="Ajax"),

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <h1>XXXX的傻猫</h1>
</div>
<div>

<table class="table" border="1px">
            <thead>
            <tr>
                <th tname="title">IP地址</th>
                <th tname="account">端口</th>
                <th tname="operator">操作</th>
            </tr>
            </thead>
            <tbody>

            {%for obj in articles%}
            <tr>
                  <!--隐藏一个标签放数据，提交表单使用-->
                <td tname="title">{{obj.title}}<a tname="id" style="display: none">{{obj.id}}</a></td>
                <td tname="account">{{ obj.account }}</td>
                <td tname="operator"><a href="javacript:void(0)" onclick="test11(this)" class="edit1"><span class="glyphicon glyphicon-edit" data-toggle="modal" data-target=".bs-example-modal-lg" aria-hidden="true"></span></a></td>
            </tr>
            {%endfor%}
            </tbody>
        </table>
</div>
<div id="popup" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
     <form  method="POST" style="margin: 20px 20px;">
          {% csrf_token %}
  <div class="form-group" style="display: none">   <!--隐藏一个标签放数据，提交表单使用-->
    <label for="exampleInputEmail1">id</label>
    <input id="id_id" tname="id" type="text" class="form-control" placeholder="Text input">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">文章名称</label>
    <input id="title_id" tname="title" type="text" class="form-control" placeholder="Text input">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">作者</label>
      <select tname="account" id="account_id" class="form-control" >
          {% for op in account %}
          <option  value="{{ op.id }}">{{ op.username }}</option>
          {% endfor %}
      </select>
  </div>
  <button id="ajax_submit" type="button" class="btn btn-default">确认</button>
   <button type="button" class="btn btn-default">取消</button>
</form>
    </div>
  </div>
</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    function test11(obj) {

        var v = $(obj).parent().parent().find('[tname]');
        console.log(v);
        v.each(function () {
            var t_name = $(this).attr('tname'); //查出tname的值
            var t_value = $(this).text()  //查出text值
            var ide = "'#"+ t_name + "'"
            $('#popup').find('input[tname="' + t_name + '"]').val(t_value); //使用ID查找
            //$(ide).val(t_value);  //字符串拼接，通过对应的属性名 把值赋value
            })
    }
    $('#ajax_submit').click(function () {
        $.ajax({
            url: "/app01/ajax/",
            type: "POST",
            data: {'id': $('#id_id').val(),'title': $('#title_id').val(),'account_id':$('#account_id').val()},
            success:function (data) {
                //alert（data）;//成功返回
                if(data == "ok" ){
                    location.reload();
                }else{
                    alert(data) //一般是显示
                }

            }
        })
    })
</script>
</body>
</html>

弹窗修改数据 临时解决方法 + ajax

弹窗修改数据临时解决方法 + ajax