django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库

一、最近在做接口相关的开发，需求是这样的，通过一个接口所需要传递的参数，调用接口后，处理接口响应的参数，返回多条数据，并动态生成表格，请求表单后将表格的数据入库，下面是我改过的代码，跟实际代码有些出入，但都是差不多的，只是命名相关的改了一下，第三方接口的代码下面不会公布出来，请见谅！

二、其中界面很简单，就一个文本输入框，输入关键字，一个查询按钮，点击的时候触发js事件，并通过ajax请求，还有一个暂时没有数据的表格，查询后动态生成的数据，操作只有一个移除功能，可以移除这条表格的数据，保存后入库，这里只贴主要代码，这里主要通过关键字来查找某个组group的用户信息，具体操作需根据实际业务情况：

（1）、html页面代码如下：

<form method="post" action="{% url 'user:user_info_add' %}">
{% csrf_token %}
<div><input id="key_words" name="key_words" type="text"><a onclick="query({{ user_id }})">查询</a>
</div><table><thead><tr><th>姓名</th><th>身份证号</th><th>手机号</th><th>操作</th></tr></thead><tbody id="user_info"></tbody>
</table><button type="submit">保存</button>

（2）、js事件代码如下：

    <script type="text/javascript">function query(user_id){var key_words= $('#key_words').val()$.ajax({type: "post",url: "{% url 'user:user_query_info' %}",dataType: "json",data: JSON.stringify({user_id: user_id, key_words: key_words}),success: function (data) {for (var i = 0; i < data.length; i++) {$('#user_info').append("<tr id='row"+i+"'><input type='hidden' name='row"+ i +"' value='"+i+"'><td>"+ data[i]['name'] + "</td><input type='hidden' name='name"+ i +"' value='"+data[i]['name']+"'><td>"+ data[i]['id_no'] + "</td><input type='hidden' name='id_no"+ i +"' value='"+data[i]['id_no']+"'><td>" + data[i]['mobile_no']+"</td><input type='hidden' name='mobile_no"+ i +"' value='"+data[i]['mobile_no']+"'><td><a onclick='remove("+i+")'>移除</a></td></tr>")}}});}function remove(i) {$('#row'+i).remove()}</script>

（3）、其中点击查询来请求接口，这里django底下的url为user:user_query_info，其中view底下便是查询所需数据，并调用接口UserInfoSearch，这个封装的接口便不提供了，就是封装参数请求过去而已，返回响应的数据动态生成表格，主要代码如下：

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse
from json import loads
from user.models.user_model import User
from interface.models import UserInfoSearchclass QueryUserInfo(View):"""查询用户信息"""def post(self, request):# 获取ajax请求过来的data数据for key in request.POST:keydict = eval(key)user_id = int(keydict["user_id"])user_name = str(keydict["user_name"])# 获取用户相关的数据库数据，供接口使用user_object = User.objects.get(id=user_id)group_id = user_object.group_idquery_id = user_object.query_id# 请求搜索用户信息接口user_info_data = loads(UserInfoSearch.get(self, request, query_id, group_id, user_name).content)user_info_data = loads(user_info_data)# 返回成功进行操作，取出相关数据，并封装进user_info_list这个列表当中，返回一个JsonResponse对象，通过返回的数据动态生成表格if user_info_data['code'] == 0:print(user_info_data)user_data = user_info_data['data']user_info_list = []for user in user_data:user_list = user['userList']for list in user_list:user_dict = {}user_dict['name'] = list['name']for info_list in list['infoList']:user_dict['id_no'] = info_list['id_no']user_dict['mobile_no'] = info_list['mobile_no']user_info_list.append(user_dict)print(user_info_list)else:user_info_list = []return JsonResponse(user_info_list, safe=False)@csrf_exemptdef dispatch(self, *args, **kwargs):return super(QueryUserInfo, self).dispatch(*args, **kwargs)

接口返回成功时，响应的数据格式如下：

{"code": 0,"message": "成功","data": [{"keywords": "软件工程","groupId": "10","userList": [{"name": '林小熊',"infoList": [{"id_no": '4413199509237848',"mobile_no": '18565726783'}]}{"name": '林大熊',"infoList": [{"id_no": '4413199509837848',"mobile_no": '18565726788'}]}]}]
}

（4）、请求接口成功后，如果有响应数据的话，就会动态生成表格，在上面的js底下有封装了几个input表单隐藏域，用来保存数据使用，主要的思路是把表格底下的每一条数据的不同列都通过索引来区分标记，比如第一行的就分别为row0，name0，id_no0，mobile_no0，以此类推，主要js的代码如下：

for (var i = 0; i < data.length; i++) {$('#user_info').append("<tr id='row"+i+"'><input type='hidden' name='row"+ i +"' value='"+i+"'><td>"+ data[i]['name'] + "</td><input type='hidden' name='name"+ i +"' value='"+data[i]['name']+"'><td>"+ data[i]['id_no'] + "</td><input type='hidden' name='id_no"+ i +"' value='"+data[i]['id_no']+"'><td>" + data[i]['mobile_no']+"</td><input type='hidden' name='mobile_no"+ i +"' value='"+data[i]['mobile_no']+"'><td><a onclick='remove("+i+")'>移除</a></td></tr>")
}

点击保存之后，要将返回多条数据入库，而关键字是一样的，关键字一样，但是返回数据多天，这里就要筛选处理数据，主要代码如下，那些model还有引包的这里就不附上了，这里主要是记录如何得到所要保存的数据，筛选过滤数据：

class UserInfoAddView(View):def post(self, request, user_id):"""添加用户信息:param request::param user_id:  用户表id:return:"""key_words = request.POST.get('key_words')common_user_data = {'key_words': key_words}user_info_list = []# 获取所有表单数据，但只筛选动态表格底下的表单隐藏域名称包含row的，然后通过这个键找到其值，然后通过其值找到动态表格的各个数据，封装为字典，并追加到列表底下for key, val in request.POST.items():user_dict = {}if 'row' in key:name = request.POST.get('name' + val)id_no = request.POST.get('id_no' + val)mobile_no = request.POST.get('mobile_no' + val)user_dict['name'] = nameuser_dict['id_no'] = id_nouser_dict['mobile_no'] = mobile_no# 这里过滤掉循环所产生空的字典，有数据才追加列表if user_dict:user_info_list.append(user_dict)# 循环列表底下的字典数据，并合并公共的数据字典，最后入库for user in user_info_list:user_data = dict(common_user_data, **user)UserInfo.objects.create(**user_data)return render(request, '/user/user_info_success.html')

三、以上内容仅供学习参考，谢谢！

django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库相关推荐

时间戳处理：vue中请求接口返回的数据将时间戳转换成时间并渲染到页面
问题: 今天遇到一个问题是,请求接口,返回了很多的时间戳数据.将时间戳转换成时间.并渲染到页面上.之前有篇文章讲的是单个时间戳的转换.这次是多个数据.我有点不知所措了. 分析: 经过思考,我们可以这样 ...
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml)
.net core将URL请求格式化为XML或JSON(网站动态生成sitemap.xml) 首先设置 Startup.cs 文件配置 ConfigureServices services.AddM ...
onsubmit=“return check() 给form加onsubmit 验证所有表单后再提交，可以用返回false 来阻止submit提交
onsubmit="return check() 给form加onsubmit 验证所有表单后再提交,可以用返回false 来阻止submit提交<form class="f ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...
微信h5页面提交表单后返回键重复提交的问题
微信h5页面提交表单后返回键重复提交的问题问题描述:h5表单提交保存成功之后,手机返回后原来的页面还能提交表单. 示例: mui.post('savexxxx',data,function(res) ...
web元件库、axure元件库、元件库、web组件、控件、表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.web组件.控件.表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴. ...
请求接口返回的是一个html_搜狗美图 API 接口请求调用
搜狗美图 API 接口在网上已经很多且大都封装成了 API 供别人调用.支持前台跨域请求,以POST方式提交图片即可.搜狗美图 API 接口每日都会更新一张美图,本 API 接口可选择生成当日美图,也 ...
uniapp请求接口返回：ER_SP_UNDECLARED_VAR: Undeclared variable: NaN 已解决
原因:请求接口的时候,后台未返回对应的值.请求接口的时候需要携带参数,当前未携带参数,或者后台返回的值为空. 下面是场景还原: 这里请求参数的时候,携带了一个this.goodsPage,这个参数为分 ...
怎样不停请求接口实现实时刷新_快狗打车实时数仓和基于Hologres的数据服务建设...
前言数据的实时化是最近几年数据行业很重要的趋势,我们在去年底也建立起新一代的实时数仓,但是在数据应用上一直没有取得很大的突破,我们希望实时数仓不仅仅是支撑大屏.核心实时报表.个别实时应用等简单的场景 ...

django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库

django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库相关推荐

最新文章

热门文章