2 设备的条件查询共20分A可以按照设备名称模糊查询;5分B可以按照制造商查询5分制造商要使用下拉框动态获取数据;5分D查询条件回显;5分代码
以下是一个设备条件查询的示例代码:
<!DOCTYPE html>
<html>
<head>
<title>设备查询</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>设备查询</h1>
<form id="searchForm">
<label for="name">设备名称:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="manufacturer">制造商:</label>
<select id="manufacturer" name="manufacturer">
<option value="">请选择</option>
</select>
<br><br>
<input type="submit" value="查询">
</form>
<script>
$(document).ready(function() {
// 动态获取制造商数据
$.ajax({
url: "getManufacturers.php",
method: "GET",
success: function(data) {
var manufacturers = JSON.parse(data);
var select = $('#manufacturer');
$.each(manufacturers, function(key, value) {
select.append('<option value="' + value + '">' + value + '</option>');
});
}
});
// 查询条件回显
var name = localStorage.getItem('name');
var manufacturer = localStorage.getItem('manufacturer');
if (name) {
$('#name').val(name);
}
if (manufacturer) {
$('#manufacturer').val(manufacturer);
}
// 提交表单时保存查询条件
$('#searchForm').submit(function() {
localStorage.setItem('name', $('#name').val());
localStorage.setItem('manufacturer', $('#manufacturer').val());
});
});
</script>
</body>
</html>
在这个示例代码中,我们使用了jQuery库来简化操作。其中,getManufacturers.php是一个后端接口,用于获取制造商数据。
在前端部分,通过AJAX请求获取制造商数据,并将其添加到下拉框中。查询条件回显部分,我们使用了浏览器的本地存储(localStorage)来保存查询条件,在页面加载时将保存的查询条件回显到相应的表单字段中。
你可以根据自己的项目需求,修改代码中的URL和数据格式等部分
原文地址: http://www.cveoy.top/t/topic/iJsi 著作权归作者所有。请勿转载和采集!