通过点击事件,使用异步抛送小红、小明、小欣的信息,信息包含姓名,年龄,性别,并异步获取到小红、小明、小欣的信息,在页面进行列表染,并求出他们的平均年龄
时间: 2024-03-13 14:45:11 浏览: 84
可以使用jQuery的ajax方法来实现异步抛送和获取数据,然后使用JavaScript的reduce方法求平均年龄,并使用jQuery的append方法在页面中进行列表渲染。具体实现如下:
HTML代码:
```html
<ul id="list"></ul>
```
JavaScript代码:
```javascript
// 异步抛送小红、小明、小欣的信息
$("#btn").click(function() {
var data = [
{name: "小红", age: 18, gender: "女"},
{name: "小明", age: 20, gender: "男"},
{name: "小欣", age: 22, gender: "女"}
];
$.ajax({
type: "POST",
url: "your_url",
data: JSON.stringify({data:data}),
contentType: "application/json",
dataType: "json",
success: function(data) {
// 异步获取小红、小明、小欣的信息
var totalAge = data.data.reduce(function(prev, curr) {
return prev + curr.age;
}, 0);
var avgAge = totalAge / data.data.length;
console.log(avgAge); // 输出平均年龄
// 渲染列表
$("#list").empty();
for (var i = 0; i < data.data.length; i++) {
var item = $("<li></li>").text(data.data[i].name + "," + data.data[i].age + "岁," + data.data[i].gender);
$("#list").append(item);
}
}
});
});
```
需要注意的是,抛送的数据需要进行JSON.stringify处理,以便服务器能够正确地解析。同时,需要在ajax请求中设置contentType和dataType为"application/json"和"json",以确保数据的正确传输和接收。在渲染列表时,可以使用jQuery的append方法将创建的li元素添加到ul元素中。
阅读全文