如何在CherryPy网页指定字段显示航点文件生成的经纬度边界值

第一步：定位前端输入框 #

先找到页面里四个经纬度输入框的HTML代码，记录它们的id（或name）属性。比如常见结构如下：

<input type="text" id="left_lon" placeholder="左边界经度">
<input type="text" id="right_lon" placeholder="右边界经度">
<input type="text" id="top_lat" placeholder="上边界纬度">
<input type="text" id="bottom_lat" placeholder="下边界纬度">

第二步：后端传递数据到前端 #

你已经在server.py中通过parse_waypoint_file拿到了desc.bounds的left/right/top/bottom值，接下来根据页面交互方式分两种场景处理：

场景1：上传后页面刷新 #

如果上传航点文件后页面会重新加载，在处理上传的CherryPy路由函数里，把边界数据传入模板上下文：

@cherrypy.expose
def upload_waypoint(self, file):
    # 你的现有解析代码：获取desc.bounds
    bounds_data = {
        'left': desc.bounds.left,
        'right': desc.bounds.right,
        'top': desc.bounds.top,
        'bottom': desc.bounds.bottom
    }
    # 假设使用CherryPy模板渲染，将数据传入模板
    return cherrypy.render('mapgen.html', {'bounds': bounds_data})

然后在HTML模板中，给输入框设置value属性：

<input type="text" id="left_lon" value="${bounds.left if bounds else ''}">
<input type="text" id="right_lon" value="${bounds.right if bounds else ''}">
<input type="text" id="top_lat" value="${bounds.top if bounds else ''}">
<input type="text" id="bottom_lat" value="${bounds.bottom if bounds else ''}">

（注：模板语法根据使用的引擎略有差异，比如Mako/Jinja2均采用类似${}的写法）

场景2：异步上传（页面不刷新） #

如果上传是通过AJAX实现的（页面无跳转），后端需返回JSON格式的边界数据：

import json

@cherrypy.expose
def upload_waypoint_ajax(self, file):
    # 现有解析代码：获取desc.bounds
    bounds_data = {
        'left': desc.bounds.left,
        'right': desc.bounds.right,
        'top': desc.bounds.top,
        'bottom': desc.bounds.bottom
    }
    cherrypy.response.headers['Content-Type'] = 'application/json'
    return json.dumps(bounds_data)

前端在上传成功的回调中，用JavaScript填充输入框：

// 原生JS示例，jQuery写法逻辑类似
document.getElementById('upload-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    fetch('/upload_waypoint_ajax', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(bounds => {
        document.getElementById('left_lon').value = bounds.left;
        document.getElementById('right_lon').value = bounds.right;
        document.getElementById('top_lat').value = bounds.top;
        document.getElementById('bottom_lat').value = bounds.bottom;
    });
});

第三步：验证与调试 #

• 在server.py中添加print(bounds_data)，确认拿到的经纬度值是有效数值/字符串；
• 检查前端输入框的id与代码中使用的完全一致（注意大小写）；
• 如果输入框仍无内容，打开浏览器控制台（F12）查看是否有JS报错或请求异常。

内容的提问来源于stack exchange，提问作者user3765883