查询条件
查询结果
基本信息
-
车主姓名：
-
证件类型：
-
证件号码：
-
联系电话：
-
地址：
-
邮政编码：
车辆信息
-
品牌型号：
-
车身颜色：
-
使用性质：
-
排量：
-
核定载重：
-
核定载客：
-
注册日期：
-
年检有效期：
-
交强险有效期：
-
商业险有效期：
违章信息
javascript
// main.jsconst form = document.getElementById('form');
const resultContainer = document.getElementById('result-container');const ownerNameSpan = document.getElementById('owner-name');
const idTypeSpan = document.getElementById('id-type');
const idNumberSpan = document.getElementById('id-number');
const phoneNumberSpan = document.getElementById('phone-number');
const addressSpan = document.getElementById('address');
const zipCodeSpan = document.getElementById('zip-code');const brandModelSpan = document.getElementById('brand-model');
const carColorSpan = document.getElementById('car-color');
const useTypeSpan = document.getElementById('use-type');
const displacementSpan = document.getElementById('displacement');
const ratedLoadSpan = document.getElementById('rated-load');
const ratedPassengerSpan = document.getElementById('rated-passenger');
const registrationDateSpan = document.getElementById('registration-date');
const annualInspectionDateSpan = document.getElementById('annual-inspection-date');
const trafficInsuranceDateSpan = document.getElementById('traffic-insurance-date');
const commercialInsuranceDateSpan = document.getElementById('commercial-insurance-date');const violationTable = document.getElementById('violation-table');form.addEventListener('submit', (e) => {e.preventDefault();const plateNumber = document.getElementById('plate-number').value;const engineNumber = document.getElementById('engine-number').value;const frameNumber = document.getElementById('frame-number').value;// 根据输入的查询条件发起请求，查询机动车信息fetch('http://example.com/api/vehicle-query', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({plateNumber,engineNumber,frameNumber,}),}).then(res => res.json()).then(data => {// 解析返回的查询结果并显示在页面上const { basicInfo, vehicleInfo, violationList } = data;// 基本信息ownerNameSpan.textContent = basicInfo.ownerName;idTypeSpan.textContent = basicInfo.idType;idNumberSpan.textContent = basicInfo.idNumber;phoneNumberSpan.textContent = basicInfo.phoneNumber;addressSpan.textContent = basicInfo.address;zipCodeSpan.textContent = basicInfo.zipCode;// 车辆信息brandModelSpan.textContent = vehicleInfo.brandModel;carColorSpan.textContent = vehicleInfo.carColor;useTypeSpan.textContent = vehicleInfo.useType;displacementSpan.textContent = vehicleInfo.displacement;ratedLoadSpan.textContent = vehicleInfo.ratedLoad;ratedPassengerSpan.textContent = vehicleInfo.ratedPassenger;registrationDateSpan.textContent = vehicleInfo.registrationDate;annualInspectionDateSpan.textContent = vehicleInfo.annualInspectionDate;trafficInsuranceDateSpan.textContent = vehicleInfo.trafficInsuranceDate;commercialInsuranceDateSpan.textContent = vehicleInfo.commercialInsuranceDate;// 违章信息violationList.forEach(violation=> {const row = document.createElement('tr');const violationTimeCell = document.createElement('td');violationTimeCell.textContent = violation.violationTime;row.appendChild(violationTimeCell);const violationLocationCell = document.createElement('td');violationLocationCell.textContent = violation.violationLocation;row.appendChild(violationLocationCell);const violationActCell = document.createElement('td');violationActCell.textContent = violation.violationAct;row.appendChild(violationActCell);const deductionScoreCell = document.createElement('td');deductionScoreCell.textContent = violation.deductionScore;row.appendChild(deductionScoreCell);const penaltyCell = document.createElement('td');penaltyCell.textContent = violation.penalty;row.appendChild(penaltyCell);violationTable.appendChild(row);});// 显示查询结果resultContainer.style.display = 'block';}).catch(err => {alert('查询失败，请稍后再试');});
});
