前端返回.then(response=> response.json()) .then(data=>{ document.write(data)}),写出来为什么是object
时间: 2024-09-30 13:05:58 浏览: 22
前端代码中使用`response.json()`的原因是在处理从后端发送过来的数据时,通常后端返回的是以JSON格式的数据。`json()`方法用于解析响应体的内容,将其转换为JavaScript对象。这是因为JSON是键值对的形式,适合存储结构化的数据,而JavaScript对象恰好可以完美匹配这种数据结构。
当你调用`response.json()`并使用`.then()`处理返回结果时,它首先解析JSON字符串,然后返回一个包含这些数据的JavaScript对象。所以,`document.write(data)`这一句实际上会输出`data`变量,它是转换后的JSON对象。
例如,假设后端返回了一个这样的JSON对象:
```json
{
"name": "John",
"age": 30,
"city": "New York"
}
```
经过`response.json()`处理后,`data`将会是一个类似下面的JavaScript对象:
```javascript
{
name: "John",
age: 30,
city: "New York"
}
```
因此,`document.write(data)`会直接打印出整个对象,而不是预期中的某个特定值,因为`data`本身就是整个对象。如果你想输出其中的一个属性,你应该访问它的属性名,如`document.write(data.name)`。
相关问题
用nodejs完成需求:模拟接口,前端异步请求接口,检验数据是否可用。get请求和post请求所获取的请求不一样。get请求返回["zs","ls","ww"],post请求返回["张三","李四","王五"]。html页面要求是"<input oninput=""></input><span></span>",防抖异步请求接口数据,span里显示数据是否可用,异步使用axios,其他操作使用原生js,并解决跨域问题
好的,我会根据您的要求来完成这个需求。首先,我们需要使用Node.js来搭建一个简单的服务器,模拟接口,代码如下:
```javascript
const http = require('http');
const server = http.createServer((req, res) => {
if (req.method === 'GET') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['zs', 'ls', 'ww']));
res.end();
} else if (req.method === 'POST') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['张三', '李四', '王五']));
res.end();
}
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
接下来,在前端页面中,我们需要使用`axios`来异步请求该接口,代码如下:
```html
<input oninput="debounce(fetchData, 500)" />
<span id="result"></span>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const input = document.querySelector('input');
const result = document.querySelector('#result');
function debounce(func, delay) {
let timeoutId;
return function () {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
function fetchData() {
const value = input.value;
axios
.get(`http://localhost:3000?value=${value}`)
.then((response) => {
const data = response.data;
result.textContent = data.includes(value) ? '可用' : '不可用';
})
.catch((error) => {
console.error(error);
});
}
</script>
```
以上代码中,我们使用`debounce`函数来进行防抖操作,防止用户频繁输入,导致接口请求过多。同时,我们使用`axios`库来异步请求接口数据。在请求成功后,我们判断输入的值是否存在于返回的数据中,如果存在,则说明该数据可用,否则不可用。最后,将结果显示在`span`标签中。
由于我们的后端接口运行在`localhost:3000`上,而前端页面运行在另一个端口上,因此需要解决跨域问题。可以在后端代码中添加如下代码:
```javascript
res.setHeader('Access-Control-Allow-Origin', '*');
```
它允许所有的域名都可以访问该接口。完整的后端代码如下:
```javascript
const http = require('http');
const server = http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*');
if (req.method === 'GET') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['zs', 'ls', 'ww']));
res.end();
} else if (req.method === 'POST') {
res.writeHead(200, { 'Content-Type': 'application/json' });
res.write(JSON.stringify(['张三', '李四', '王五']));
res.end();
}
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
```
至此,我们就完成了模拟接口、异步请求接口、检验数据是否可用,并解决了跨域问题的需求。
1. 创建一个JSP页面buy.jsp,实现一个查询蛋糕信息的按钮和表格。当用户点击查询蛋糕信息按钮时,通过axios向后端发送一个请求,后端从数据库中查询所有蛋糕信息并将结果返回给前端。前端通过axios接收后端传回的数据,并将数据填充到表格中。 2. 在页面下方添加一个购物车区域,包括一个蛋糕列表和一个购买按钮。当用户复选蛋糕后,将其添加到蛋糕列表中。当用户点击购买按钮时,通过axios向后端发送一个请求,提交所购买的蛋糕信息。后端接收请求后,更新数据库中的剩余蛋糕数量,并将购买的蛋糕信息返回给前端。前端通过axios接收后端传回的数据,并将其填充到购物车列表中。 3. 在后端使用连接池管理数据库连接,并使用JDBC API连接数据库。实现查询所有蛋糕信息、更新蛋糕数量等操作。
好的,下面是一个简单的实现思路和代码示例。
1. 在buy.jsp中添加以下HTML代码:
```html
<button onclick="queryCakes()">查询蛋糕信息</button>
<table id="cakeTable">
<tr>
<th>蛋糕名称</th>
<th>蛋糕价格</th>
<th>蛋糕数量</th>
</tr>
</table>
<div>
<h3>购物车</h3>
<table id="cartTable">
<tr>
<th>蛋糕名称</th>
<th>蛋糕价格</th>
<th>蛋糕数量</th>
</tr>
</table>
<button onclick="buyCakes()">购买</button>
</div>
```
2. 在buy.jsp中添加以下JavaScript代码:
```javascript
function queryCakes() {
axios.get('/cakes').then(response => {
const cakes = response.data;
const table = document.getElementById('cakeTable');
cakes.forEach(cake => {
const row = table.insertRow();
row.insertCell().textContent = cake.name;
row.insertCell().textContent = cake.price;
row.insertCell().textContent = cake.quantity;
});
});
}
const cart = [];
function addToCart(name, price, quantity) {
const item = { name, price, quantity };
cart.push(item);
}
function buyCakes() {
axios.post('/buy', cart).then(response => {
const boughtCakes = response.data;
const table = document.getElementById('cartTable');
boughtCakes.forEach(cake => {
const row = table.insertRow();
row.insertCell().textContent = cake.name;
row.insertCell().textContent = cake.price;
row.insertCell().textContent = cake.quantity;
});
});
}
```
3. 在后端使用连接池管理数据库连接,并使用JDBC API连接数据库。在Servlet中添加以下代码:
```java
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;
import com.fasterxml.jackson.databind.ObjectMapper;
public class CakeServlet extends HttpServlet {
private DataSource dataSource;
@Override
public void init() throws ServletException {
try {
Context context = new InitialContext();
dataSource = (DataSource) context.lookup("java:comp/env/jdbc/cake");
} catch (NamingException e) {
throw new ServletException("Unable to initialize DataSource", e);
}
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try (Connection connection = dataSource.getConnection()) {
PreparedStatement statement = connection.prepareStatement("SELECT * FROM cakes");
ResultSet resultSet = statement.executeQuery();
List<Cake> cakes = new ArrayList<>();
while (resultSet.next()) {
Cake cake = new Cake();
cake.setId(resultSet.getInt("id"));
cake.setName(resultSet.getString("name"));
cake.setPrice(resultSet.getDouble("price"));
cake.setQuantity(resultSet.getInt("quantity"));
cakes.add(cake);
}
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json");
mapper.writeValue(response.getOutputStream(), cakes);
} catch (SQLException e) {
throw new ServletException("Unable to query cakes", e);
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try (Connection connection = dataSource.getConnection()) {
List<Cake> cart = new ObjectMapper().readValue(request.getInputStream(),
new TypeReference<List<Cake>>() {});
for (Cake cake : cart) {
PreparedStatement statement = connection.prepareStatement(
"UPDATE cakes SET quantity = quantity - ? WHERE id = ?");
statement.setInt(1, cake.getQuantity());
statement.setInt(2, cake.getId());
statement.executeUpdate();
}
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json");
mapper.writeValue(response.getOutputStream(), cart);
} catch (SQLException e) {
throw new ServletException("Unable to buy cakes", e);
}
}
}
```
这里假设数据库中有一个名为cakes的表,包含id、name、price和quantity四个字段。在web.xml中配置数据源:
```xml
<resource-ref>
<description>DB Connection</description>
<res-ref-name>jdbc/cake</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>
<resource-env-ref>
<description>DB Connection Pool</description>
<resource-env-ref-name>jdbc/cake</resource-env-ref-name>
<resource-env-ref-type>javax.sql.DataSource</resource-env-ref-type>
</resource-env-ref>
<resource-env-ref>
<description>DB Connection Properties</description>
<resource-env-ref-name>jdbc/cake/properties</resource-env-ref-name>
<resource-env-ref-type>java.util.Properties</resource-env-ref-type>
</resource-env-ref>
<resource-ref>
<description>DB Connection Pool</description>
<res-ref-name>jdbc/cake</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
<mapped-name>java:comp/env/jdbc/cake</mapped-name>
<lookup-name>jdbc/cake</lookup-name>
</resource-ref>
```
以上代码示例仅为参考,实际实现中需要根据具体需求进行修改。
阅读全文