请输入您的地址或邮政编码以查找附近的汽车维修点。
style.css
css
body {font-family: Arial, sans-serif;font-size: 14px;line-height: 1.5em;
}h1 {font-size: 24px;margin-bottom: 15px;
}p {margin-bottom: 15px;
}form {display: flex;align-items: center;
}input[type="text"] {width: 300px;padding: 5px;border: 1px solid ccc;border-radius: 5px;margin-right: 10px;
}input[type="submit"] {padding: 5px 10px;border: 1px solid 333;border-radius: 5px;background-color: 333;color: fff;cursor: pointer;
}results {margin-top: 20px;
}results h2 {font-size:18px;margin-bottom: 10px;
}results ul {list-style-type: none;padding: 0;
}results li {margin-bottom: 10px;
}results a {text-decoration: none;color: 333;
}script.js
javascript
(function() {// 从表单中获取地址或邮政编码const form = document.getElementById('form');const addressInput = document.getElementById('address');// 处理表单提交form.addEventListener('submit', (event) => {event.preventDefault();// 验证地址或邮政编码if (!addressInput.value) {alert('请提供地址或邮政编码。');return;}// 清除先前的搜索结果const results = document.getElementById('results');results.innerHTML = '';// 调用 API 搜索汽车维修点fetch(`api.php?address=${addressInput.value}`).then((response) => response.json()).then((data) => {// 解析搜索结果if (data.length === 0) {// 如果没有找到结果，则显示一条消息results.innerHTML = '
抱歉，没有找到任何汽车维修点。
';} else {// 如果找到了结果，则创建列表并填充结果const list = document.createElement('ul');results.appendChild(list);data.forEach((result) => {const item = document.createElement('li');const link = document.createElement('a');link.href = result.url;link.textContent = result.name;item.appendChild(link);list.appendChild(item);});}}).catch((error) => {// 如果 API 调用失败，则显示一条消息results.innerHTML = '
抱歉，发生了错误。
';console.error(error);});});
})();api.php
php
'汽车维修点 1','url' => 'https://example.com/car-repair-1',),array('name' => '汽车维修点 2','url' => 'https://example.com/car-repair-2',),array('name' => '汽车维修点 3','url' => 'https://example.com/car-repair-3',),
));echo $results;
?>
