django-ajax交互，反显修改页的数据
1、点击修改按钮时，获取id值
2、ajax交互，将获取的id值传给后端，后端根据id再将数据处理好后，返给前端页面
1 function GetPrev(arg) { 2 console.log(arg) 3 $.ajax({ 4 // 后端程序的url地址 5 url: '/get_device_by_id', 6 // 也可以使用method，提交数据的方式，默认是'GET'，常用的还有'POST' 7 type: 'POST', 8 dataType: 'json', // 返回的数据格式，常用的有是'json','html',"jsonp" 9 data: { 10 "id": arg 11 } 12 }) 13 .done(function (resp) { // 请求成功以后的操作 14 console.log(resp); 15 $("#u_device_id").val(resp["device_id"]); 16 $("#u_center_name").val(resp["center_name"]); 17 $("#device_id").val(resp["device_id"]); 18 $("#u_device_name").val(resp["device_name"]); 19 $("#u_device_system").val(resp["device_system"]); 20 $("#u_device_factory").val(resp["device_factory"]); 21 $("#u_device_system_version").val(resp["device_system_version"]); 22 $("#u_device_asset_number").val(resp["device_asset_number"]); 23 $("#u_device_phone_number").val(resp["device_phone_number"]); 24 $("#u_device_recipient").val(resp["device_recipient"]); 25 $("#u_device_user").val(resp["device_user"]); 26 $("#device_img").val(resp["device_img"]); 27 $("#asset_img").val(resp["asset_img"]); 28 }) 29 .fail(function (error) { // 请求失败以后的操作 30 console.log(error); 31 }); 32 }
3、view视图
1 @csrf_exempt 2 def get_device_by_id(request): 3 """修改页面回显数据的视图""" 4 json_dict = {} # 先转成字典 5 if request.is_ajax(): 6 device_id = request.POST.get("id") 7 data = DeviceInfo.objects.get(id=device_id) 8 json_dict['device_id'] = data.id 9 json_dict["center_name"] = data.center_name 10 json_dict['device_name'] = data.device_name 11 json_dict['device_system'] = data.device_system 12 json_dict['device_factory'] = data.device_factory 13 json_dict['device_system_version'] = data.device_system_version 14 json_dict['device_asset_number'] = data.device_asset_num 15 json_dict['device_phone_number'] = data.device_phone_num 16 json_dict['device_recipient'] = data.device_recipient 17 json_dict['device_user'] = data.device_user 18 json_dict['creator'] = data.creator 19 return JsonResponse(json_dict, content_type='application/json; charset=utf-8')
html内容，页面反显
1 <div class="modal fade" id="updateMyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 2 aria-hidden="true"> 3 <div class="modal-dialog" style="max-width:400px"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 7 × 8 </button> 9 <h4 class="modal-title" id="myModalLabel2"> 10 修改设备 11 </h4> 12 </div> 13 <div class="modal-body"> 14 <form role="form" method='POST' action="/device_update" enctype="multipart/form-data"> 15 <div class="form-group"> 16 <label for="device_id">ID编号</label> 17 <input id=u_device_id type="text" value="" class="form-control" name="u_device_id" 18 placeholder="请输入ID编号" 19 required 20 lay-verify="required" readonly="true"> 21 </div> 22 <div class="form-group"> 23 <label for="u_center_name">中心名称</label> 24 <select id="u_center_name" name="u_center_name" class="form-control" type="search" 25 placeholder="请输入系统"> 26 {% if u_center_name is None %} 27 <option value="">请输入中心名称</option> 28 <option>一中心</option> 29 <option>二中心</option> 30 <option>三中心</option> 31 <option>平台研发中心</option> 32 {% elif u_center_name == "一中心" %} 33 <option selected>一中心</option> 34 <option>二中心</option> 35 <option>三中心</option> 36 <option>平台研发中心</option> 37 {% elif u_center_name == "二中心" %} 38 <option>一中心</option> 39 <option selected>二中心</option> 40 <option>三中心</option> 41 <option>平台研发中心</option> 42 {% elif u_center_name == "三中心" %} 43 <option>一中心</option> 44 <option>二中心</option> 45 <option selected>三中心</option> 46 <option>平台研发中心</option> 47 {% elif u_center_name == "平台研发中心" %} 48 <option>一中心</option> 49 <option>二中心</option> 50 <option>三中心</option> 51 <option selected>平台研发中心</option> 52 {%endif%} 53 </select> 54 </div> 55 <div class="form-group"> 56 <label for="device_name">设备名称</label> 57 <input id=u_device_name type="text" value="" class="form-control" name="u_device_name" 58 placeholder="请输入设备名称" 59 required 60 lay-verify="required"> 61 </div> 62 <div class="form-group"> 63 <label for="device_system">设备系统</label> 64 <select id="u_device_system" name="u_device_system" class="form-control" type="search" 65 placeholder="请输入系统"> 66 {% if u_device_system is None %} 67 <option value="">请输入设备系统</option> 68 <option>安卓</option> 69 <option>ios</option> 70 <option>鸿蒙</option> 71 {% elif u_device_system == "安卓" %} 72 <option selected>安卓</option> 73 <option>ios</option> 74 <option>鸿蒙</option> 75 {% elif u_device_system == "ios" %} 76 <option>安卓</option> 77 <option selected>ios</option> 78 <option>鸿蒙</option> 79 {% elif u_device_system == "鸿蒙" %} 80 <option>安卓</option> 81 <option>ios</option> 82 <option selected>鸿蒙</option> 83 {%endif%} 84 </select> 85 </div> 86 <div class="form-group"> 87 <label for="device_factory">设备厂商</label> 88 <input id="u_device_factory" type="text" value="" class="form-control" 89 name="u_device_factory" 90 placeholder="请输入设备厂商" required 91 lay-verify="required"> 92 </div> 93 <div class="form-group"> 94 <label for="device_system_version">设备系统</label> 95 <input id="u_device_system_version" type="text" value="" class="form-control" 96 name="u_device_system_version" 97 placeholder="请输入设备系统" required 98 lay-verify="required"> 99 </div> 100 <div class="form-group"> 101 <label for="device_assert_number">资产编号</label> 102 <input id="u_device_asset_number" type="text" value="" class="form-control" 103 name="u_device_asset_number" readonly="true" 104 placeholder="请输入设备资产编号" 105 required 106 lay-verify="required"> 107 </div> 108 <div class="form-group"> 109 <label for="device_phone_number">手机号码</label> 110 <input id="u_device_phone_number" type="text" value="" class="form-control" 111 name="u_device_phone_number" 112 placeholder="请输入手机号码"> 113 </div> 114 <div class="form-group"> 115 <label for="device_recipient">出库领取人</label> 116 <input id="u_device_recipient" type="text" value="" class="form-control" 117 name="u_device_recipient" 118 placeholder="请输入出库领取人"> 119 </div> 120 <div class="form-group"> 121 <label for="creator">修改人</label> 122 <input id="u_creator" type="text" class="form-control" name="u_creator" 123 placeholder="请输入修改人" readonly="true"> 124 </div> 125 <div class="form-group"> 126 <label for="device_img">关于手机照片</label> 127 <input type="file" class="form-control" name="device_img" 128 onchange="verificationPicFile(this)">图片大小不能超过2M 129 </div> 130 <div class="form-group"> 131 <label for="asset_img">资产编号照片</label> 132 <input type="file" class="form-control" name="asset_img" 133 onchange="verificationPicFile(this)">图片大小不能超过2M 134 </div> 135 <div class="modal-footer"> 136 <button type="button" class="btn layui-btn" data-dismiss="modal">关闭 137 </button> 138 <button type="submit" class="layui-btn btn "> 139 提交 140 </button> 141 </div> 142 </form> 143 </div> 144 </div><!-- /.modal-content --> 145 </div><!-- /.modal --> 146 </div>
posted on 2021-09-21 14:49 cherry_ning 阅读(171) 评论(0) 收藏 举报
浙公网安备 33010602011771号