编写一个例如知户型一样的软件前端
时间: 2024-02-22 13:01:29 浏览: 73
好的,了解。以下是一个简单的知户型软件前端代码示例,供参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知户型</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input[type="text"] {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ddd;
width: 300px;
}
input[type="submit"] {
padding: 10px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
border: 1px solid #007bff;
width: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>知户型</h1>
<form id="form" onsubmit="return false;">
<label for="area">房屋面积:</label>
<input type="text" id="area" placeholder="请输入房屋面积">
<label for="layout">户型:</label>
<input type="text" id="layout" placeholder="请输入户型">
<label for="city">所在城市:</label>
<input type="text" id="city" placeholder="请输入城市名称">
<input type="submit" value="查询" onclick="submitForm()">
</form>
<div id="result" style="display: none;">
<p>您输入的房屋面积为<span id="areaResult"></span>平米,户型为<span id="layoutResult"></span>,位于<span id="cityResult"></span>。</p>
<p>根据我们的预测模型,该房屋的估价为<span id="priceResult"></span>元,租金为<span id="rentResult"></span>元/月,售价为<span id="saleResult"></span>元。</p>
</div>
<script>
function submitForm() {
var area = document.getElementById("area").value;
var layout = document.getElementById("layout").value;
var city = document.getElementById("city").value;
if (area && layout && city) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8080/api/predict", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText);
document.getElementById("areaResult").innerHTML = area;
document.getElementById("layoutResult").innerHTML = layout;
document.getElementById("cityResult").innerHTML = city;
document.getElementById("priceResult").innerHTML = result.price;
document.getElementById("rentResult").innerHTML = result.rent;
document.getElementById("saleResult").innerHTML = result.sale;
document.getElementById("form").style.display = "none";
document.getElementById("result").style.display = "block";
}
}
xhr.send(JSON.stringify({
"area": area,
"layout": layout,
"city": city
}));
} else {
alert("请输入完整的房屋信息!");
}
}
</script>
</body>
</html>
```
该前端界面包括一个表单和一个结果展示块,用户输入房屋的面积、户型和所在城市等信息后,点击查询按钮,前端通过 AJAX 请求后端 API 接口,获取预测结果并展示给用户。需要注意的是,该代码示例中的 AJAX 请求地址为 `http://localhost:8080/api/predict`,需要根据实际情况进行修改。同时,还需要编写后端 API 接口来处理该请求,根据输入的房屋信息进行预测并返回预测结果。
阅读全文