一.重点
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>