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

一. 需求

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

设想图.png

二. 前端代码

2.1 引入 jquery.min.js 放在 static/js目录下

2.2 js脚本 使用jquery的hide()函数 在未点击按钮前隐藏表格 .com_info为table标签中的class名

2.3 body 里面div和table标签

公司信息查询
    请输入公司名
    
    查询公司
    

        

            
公司名称
            

        
        

            
统一信用代码
            

            
公司注册号
            

        
        

            
登记机关
            

            
经营状态
            

        
        

            
注册资本
            

            
企业类型
            


        
        

            
营业开始时间
            

            
营业结束时间
            

        
        

            
注册地址
            

        
        

            
经营范围
            

        
    

2.4 js脚本 点击按钮后显示表格(jquery的show()函数),ajax请求后台接口,将数据渲染到table标签内

三. 后台接口

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