创建一个商品页,从后端项目中获取商品信息,并显示在页面上。 后端项目访问路径:http://10.8.12.150:8088/ajaxtest/goods 得到的数据是JSON格式的数组, 商品属性包含:id,goodsName,price,spec,about 分别对应商品的编号,商品名称,价格,规格,简介 后端项目可访问的接口包含:下面的接口可用作代码测试 http://10.8.12.150:8088/ajaxtest/json,可得到一个JSON格式的数据,包含name,address,age三个属性 http://10.8.12.150:8088/ajaxtest/post,可得到一个字符串
时间: 2023-08-16 10:05:53 浏览: 87
积分java源码-TextEdit:TextEdit,如/Applications中所示,在10.6、10.7和10.8上支持全屏
首先,我们需要使用前端的 AJAX 技术来从后端项目中获取商品信息。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品页</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<table id="goodsTable">
<thead>
<tr>
<th>ID</th>
<th>商品名称</th>
<th>价格</th>
<th>规格</th>
<th>简介</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
// 使用 AJAX 获取商品信息
$.get('http://10.8.12.150:8088/ajaxtest/goods', function(data) {
// 将得到的 JSON 数据转换为 JavaScript 对象
var goodsList = JSON.parse(data);
// 遍历商品数组,生成 HTML 代码并添加到表格中
goodsList.forEach(function(goods) {
var html = '<tr>' +
'<td>' + goods.id + '</td>' +
'<td>' + goods.goodsName + '</td>' +
'<td>' + goods.price + '</td>' +
'<td>' + goods.spec + '</td>' +
'<td>' + goods.about + '</td>' +
'</tr>';
$('#goodsTable tbody').append(html);
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 jQuery 库来简化 AJAX 的操作。我们使用 $.get 方法来发送 GET 请求,得到的数据会自动转换为字符串类型的 JSON 数据。我们通过 JSON.parse 方法将其转换为 JavaScript 对象,并遍历商品数组,生成 HTML 代码并添加到表格中。
注意,由于跨域访问的限制,我们需要确保后端项目支持跨域访问。如果不支持,我们可以使用 JSONP 或者代理等技术来解决跨域问题。
阅读全文