python-django 前端jquery+Ajax请求后台

一. 需求

自学过程中乐此不疲的就是自己给自己找事,下图前端一个输入框,一个按钮,想实现 点击按钮实现页面不变,去请求后台接口返回公司工商信息渲染到表格里面

设想图.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的前端...