<head> <meta charset="UTF-8"> <title>欢迎登录</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function() { // 查询按钮点击事件 $("#search-btn").click(function() { // 获取用户输入的查询信息 var flightNum = $("#flight-num").val(); var date = $("#date").val(); // 发送请求给后端 $.ajax({ url: "/flightQuery", type: "GET", data: { "flightNum": flightNum, "date": date }, success: function(data) { // 将查询结果显示在中间框中 $("#result").html(data); } }); }); // 退出按钮点击事件 $("#logout-btn").click(function() { // 跳转到首页 window.location.href = "/"; }); }); </script> </head> <body> <h1>民航航班查询</h1> <div> <label>航班号:</label> <input type="text" id="flight-num"> <br> <label>日期:</label> <input type="date" id="date"> <br> <button href="user-login-form" id="search-btn">查询</button> </div> <hr> <div id="result"></div> <hr> <button id="logout-btn">退出</button> </body> </html>
时间: 2024-02-06 17:02:13 浏览: 140
这是一个简单的 HTML 页面,包含一个航班查询功能和一个退出按钮。页面中引用了 jQuery 库。
页面中有一个输入框和一个日期选择框,用户输入航班号和日期后,点击查询按钮,会发送一个 GET 请求到 "/flightQuery" 地址,并且将用户输入的航班号和日期作为参数一起发送。当请求成功时,会将返回的查询结果显示在页面中间的区域中。
页面最下面有一个退出按钮,当用户点击该按钮时,会跳转至首页。
需要注意的是,该页面中使用了 jQuery 库,所以在使用该页面前需要确保已经引入了 jQuery 库。同时,该页面中的请求地址需要根据实际情况进行修改。
相关问题
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https://unpkg.com/vue@next"></script> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css"> <!-- import JavaScript --> <script src="https://unpkg.com/element-plus"></script> <title>Element Plus demo</title> <!-- <script src="vue.global.js"></script> --> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script> const App = { data() { return { message: "Hello", }; }, }; const app = Vue.createApp(App); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
这是一个使用Vue.js和Element Plus库创建的简单示例。在头部,你可以看到引入了Vue.js和Element Plus的CSS和JavaScript文件。这些文件是通过CDN链接引入的。
在body部分,有一个id为"app"的div元素,用于挂载Vue应用程序。在script标签中,定义了一个名为App的对象,包含一个data属性,其中有一个名为"message"的数据属性,它的初始值是"Hello"。
然后,使用Vue.createApp方法创建了一个Vue应用程序实例app,并调用app.use(ElementPlus)来启用Element Plus插件。最后,通过调用app.mount("#app")将应用程序挂载到id为"app"的div元素上。
这样,当页面加载时,你将在按钮上看到显示文本为"Hello"的Element Plus按钮。
这是我的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> </head> <body> <button class="btn">存cookie</button> <script> $(document).ready(function() { $('.btn').click(function(){ console.log($.cookie('index')); }); }); </script> </body> </html>
根据您提供的代码,我注意到您在点击按钮时尝试打印名为 "index" 的 cookie 值。然而,根据您的代码,目前并没有设置名为 "index" 的 cookie。因此,当您点击按钮时,打印结果将返回 undefined。
如果您希望在点击按钮时设置 cookie,并在控制台中打印出 cookie 值,您可以尝试以下修改:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<button class="btn">存cookie</button>
<script>
$(document).ready(function() {
$('.btn').click(function(){
$.cookie('index', 'cookie value'); // 设置名为 "index" 的 cookie
console.log($.cookie('index')); // 打印 cookie 值
});
});
</script>
</body>
</html>
```
在这个修改后的代码中,当您点击按钮时,会设置名为 "index" 的 cookie,并将其值设置为 "cookie value"。然后,通过 `console.log` 打印出 cookie 值。
请尝试使用这个修改后的代码,并检查控制台输出是否显示了正确的 cookie 值。如果问题仍然存在,请提供更多的详细信息,以便我能够更好地帮助您解决问题。
阅读全文