首页HTML，写一个查询，文本框输入值，点击查询带入http://xmairavt7.xiamenair.com/WarningPage?WarningAirports=变量，查询到网页的值返回到文本框中

HTML，写一个查询，文本框输入值，点击查询带入http://xmairavt7.xiamenair.com/WarningPage?WarningAirports=变量，查询到网页的值返回到文本框中

时间: 2024-09-25 07:04:54 浏览: 32

HTML是一种标记语言，用于创建网页结构和内容。为了实现你的需求，我们可以使用JavaScript来动态获取用户输入并在点击按钮后发送请求，并将返回的数据显示在文本框中。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>查询页面</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  </head> <body> <label for="inputValue">请输入机场代码:</label> <input type="text" id="inputValue" name="inputValue"> <button onclick="fetchData()">查询</button> <br><br> <label for="outputValue">结果显示:</label> <input type="text" id="outputValue" readonly> <script> function fetchData() { const inputValue = $('#inputValue').val(); // 获取文本框中的值 if (!inputValue) { alert("请输入机场代码"); return; } $.ajax({ url: "http://xmairavt7.xiamenair.com/WarningPage?WarningAirports=" + encodeURIComponent(inputValue), // 发送GET请求 dataType: 'json', // 假设服务器返回的是JSON格式 success: function(response) { // 请求成功时 $('#outputValue').val(response.result); // 将返回值显示在文本框中 }, error: function(xhr, status, error) { // 请求失败时 console.error('查询失败:', error); $('#outputValue').val('查询错误'); } }); } </script> </body> </html> ``` 在这个示例中，用户在文本框中输入机场代码，点击“查询”按钮会触发`fetchData`函数，它会发送一个GET请求到指定URL，然后将响应数据显示在下方的文本框中。

阅读全文