一. 需求
自学过程中乐此不疲的就是自己给自己找事,下图前端一个输入框,一个按钮,想实现 点击按钮实现页面不变,去请求后台接口返回公司工商信息渲染到表格里面
设想图.png
二. 前端代码
2.1 引入 jquery.min.js 放在 static/js目录下
<script src="/static/js/jquery.min.js"></script>
2.2 js脚本 使用jquery的hide()函数 在未点击按钮前隐藏表格 .com_info为table标签中的class名
<script type="text/javascript" >
$(document).ready(function() {
$(".com_info").hide();
});
</script>
2.3 body 里面div和table标签
<h1>公司信息查询</h1>
<span>请输入公司名</span>
<input style="height:30px;width: 200px" id="comname" value="{{ comname }}" name="comname"></input>
<button type="button" id="query_cominfo">查询公司</button>
<table class="com_info" border="1px" width="100%">
<tr>
<th>公司名称</th>
<th colspan="3" id="comname2"></th>
</tr>
<tr>
<th>统一信用代码</th>
<td id="creditCode"></td>
<th>公司注册号</th>
<td id="orgNumber"></td>
</tr>
<tr>
<th>登记机关</th>
<td id="regAuthority"></td>
<th>经营状态</th>
<td id="operatingStatus"></td>
</tr>
<tr>
<th>注册资本</th>
<td id="regCapital"></td>
<th>企业类型</th>
<td id="companyType"></td>
</tr>
<tr>
<th>营业开始时间</th>
<td id="termStart"></td>
<th>营业结束时间</th>
<td id="teamEnd"></td>
</tr>
<tr>
<th>注册地址</th>
<td colspan="3" id="regAddress"></td>
</tr>
<tr>
<th>经营范围</th>
<td colspan="3" id="businessScope"></td>
</tr>
</table>
2.4 js脚本 点击按钮后显示表格(jquery的show()函数),ajax请求后台接口,将数据渲染到table标签内
<script type="text/javascript">
$(document).ready(function () {
$("#query_cominfo").click(function () {
var comname = $("input[name='comname']").val();
alert_text = '请稍等,正在查询:' + comname + '信息';
alert(alert_text);
$.ajax({
type: 'POST',
url: "{% url 'codetest:ajax_query_com' %}",
data: {
comname: $('#comname').val(),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
success: function (data) {
$(".com_info").show();
$("#comname2").html(data.comname);
$("#creditCode").html(data.creditCode);
$("#orgNumber").html(data.orgNumber);
$("#regAuthority").html(data.regAuthority);
$("#operatingStatus").html(data.operatingStatus);
$("#regCapital").html(data.regCapital);
$("#companyType").html(data.companyType);
$("#termStart").html(data.termStart);
$("#teamEnd").html(data.teamEnd);
$("#regAddress").html(data.regAddress);
$("#businessScope").html(data.businessScope);
}
});
});
});
</script>
三. 后台接口
import json
import requests
from django.http import JsonResponse
def company(request):
comname = '北京百度网讯科技有限公司'
return render(request, 'codetest/index.html', {'comname': comname})
def ajax_query_com(request):
comname = request.POST['comname']
print(comname)
item = {}
keys = ['comname','data','creditCode','orgNumber','regAuthority','operatingStatus','regCapital','companyType','termStart','teamEnd','regAddress','businessScope']
for key in keys:
item[key] = ''
if comname:
url = '企业工商查询接口地址'
post_data = {'userName':comname}
datas = requests.post(url,data=post_data).text
item['data'] = datas
data = json.loads(datas)
item['comname'] = comname
#信用代码
item['creditCode'] = data['creditCode'] if 'creditCode' in data.keys() else ''
#工商注册号
item['orgNumber'] = data['orgNumber'] if 'orgNumber' in data.keys() else ''
#登记机关
item['regAuthority'] = data['regAuthority'] if 'regAuthority' in data.keys() else ''
#在营状态
item['operatingStatus'] = data['operatingStatus'] if 'operatingStatus' in data.keys() else ''
#注册资本
item['regCapital'] = data['regCapital'] if 'regCapital' in data.keys() else ''
#企业类型
item['companyType'] = data['companyType'] if 'companyType' in data.keys() else ''
#营业开始时间
item['termStart'] = data['termStart'] if 'termStart' in data.keys() else ''
#营业结束时间
item['teamEnd'] = data['teamEnd'] if 'teamEnd' in data.keys() else ''
#注册地址
item['regAddress'] = data['regAddress'] if 'regAddress' in data.keys() else ''
#经营范围
item['businessScope'] = data['businessScope'] if 'businessScope' in data.keys() else ''
print(item)
return JsonResponse(item)
else:
item['data'] = '没有查到此公司!'
return JsonResponse(item)
四. 效果 前端css low....
image.png
原谅我low的前端...
