<!DOCTYPE html> <html> <head> <title>查询和删除功能</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>查询和删除</h1> <form> <label for="queryInput">查询:</label> <input type="text" id="queryInput" name="queryInput"> <button onclick="query()">查询</button> </form> <form> <label for="deleteInput">删除:</label> <input type="text" id="deleteInput" name="deleteInput"> <button onclick="deleteItem()">删除</button> </form> <div id="result"></div> <script src="script.js"></script> </body> </html> ``` script.js: ```javascript function query() { var queryValue = document.getElementById("queryInput").value; $.ajax({ url: "/query", method: "GET", data: { query: queryValue }, success: function(response) { document.getElementById("result").innerText = response; }, error: function(xhr, status, error) { console.error(error); } }); } function deleteItem() { var deleteValue = document.getElementById("deleteInput").value; $.ajax({ url: "/delete", method: "DELETE", data: { delete: deleteValue }, success: function(response) { document.getElementById("result").innerText = response; }, error: function(xhr, status, error) { console.error(error); } }); } ``` server.js: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.get('/query', (req, res) => { const queryValue = req.query.query; const result = `查询成功,结果为:${queryValue}`; res.send(result); }); app.delete('/delete', (req, res) => { const deleteValue = req.body.delete; const result = `删除成功:${deleteValue}`;
时间: 2024-04-21 22:23:47 浏览: 33
这段代码是一个简单的查询和删除功能的前端和后端实现。前端部分是一个HTML页面,包含两个表单:一个用于查询,一个用于删除。点击查询按钮时,会调用`query()`函数发送AJAX请求到服务器的`/query`路由,并将查询的值作为参数传递。点击删除按钮时,会调用`deleteItem()`函数发送AJAX请求到服务器的`/delete`路由,并将删除的值作为参数传递。
后端部分是一个Express应用,监听两个路由:`/query`和`/delete`。当收到`/query`路由的GET请求时,会获取查询的值并返回一个包含查询结果的响应。当收到`/delete`路由的DELETE请求时,会获取删除的值并返回一个包含删除成功信息的响应。
这段代码使用了jQuery库来简化AJAX请求的操作。
相关问题
<!DOCTYPE html></!DOCTYPE> <html> <head> <title>绿叶学习网</title> </head> <body> <p>绿叶学习网</p> </body> </html>哪里错了
在给出的HTML代码中,有两个地方出现了错误:
1. 第一行的`<!DOCTYPE html></!DOCTYPE>`是错误的。正确的写法是`<!DOCTYPE html>`,用于声明文档类型为HTML。
2. 第二行的`</!DOCTYPE>`也是错误的。正确的写法是`</html>`,用于闭合HTML标签。
修正后的代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>绿叶学习网</title>
</head>
<body>
<p>绿叶学习网</p>
</body>
</html>
```
<!DOCTYPE html></!DOCTYPE> <html> <head> <title>绿叶学习网</title> </head> <body> <p>绿叶学习网</p> </body> </html>
这是一个HTML文档的基本结构,它描述了一个网页的内容和结构。下面是对该HTML文档的介绍:
<!DOCTYPE html>:这是一个文档类型声明,指定了该文档使用的HTML版本。
<html>:这是HTML文档的根元素,它包含了整个HTML文档的内容。
<head>:这是HTML文档的头部部分,用于定义文档的元数据和引入外部资源。
<title>:这是HTML文档的标题,显示在浏览器的标题栏或标签页上。
<body>:这是HTML文档的主体部分,包含了网页的实际内容。
<p>:这是一个段落元素,用于定义一个段落。
绿叶学习网:这是一个段落中的文本内容,将在网页中显示。