html怎么获取动态数据？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html怎么获取动态数据？相关的知识，希望对你有一定的参考价值。
我知道得需要asp.net，然后再用js调用，可是不会写啊，求助
可以使用动态html从一个HTML页面元素中获取数据。它允许获取和操作数据而不需经过服务器。使用页面上对象的属性，在 Visual Basic代码中可以在页面上搜集数据、执行计算并显示响应，而不需将处理从客户端传送到服务器，传送将增加对用户操作和请求的响应时间。
例如，假设正在使用一个应用程序，它允许用户通过输入作者名字、书名或检索书号到一个搜索页的文本字段中，从一个数据库中查询书目。文本字段被命名为Author、Title和CallNo。当从应用程序的搜索页提交一个查询时，应用程序必须从这些文本字段获取该值。
下面的代码显示了如何使用变量来获取这些字段的值：
Private function cmdSearch_onclick() As Boolean
创建变量包含搜索条件。
Dim sAuthor as String
Dim sTitle as String
Dim sCallNo as String
从页面获取搜索条件。
sAuthor=Me.author.Value
sTitle=Me.title.Value
sCallNo=Me.callno.Value
这里的代码处理并返回查询。
End Function
这段代码使用HTML文本字段的Value属性获取字段的数据，代码将打开一个数据库连接、创建一个记录集并返回适当的记录，然后数据被发送给用户。 参考技术A html获取动态数据的方法：
1、html中加入ajax代码：
function showCustomer(str)
var xmlhttp;
if (str=="")
document.getElementById("txtHint").innerHTML="";
return;
if (window.XMLHttpRequest)
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
else
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
2、html代码：
<html>
<head>测试动态数据</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
3、当运行程序后，ajax会动态获取db数据并显示。
动态菜单栏
要求
根据接口数据动态设置菜单，层级层列都不确定。同时获取到菜单栏之后，每个栏位还需要单独二次请求接口获取栏位的数量。父节点数量需要前端处理，将所有子节点栏位加起来。
三个未知：
栏位未知，层级未知，详情页面未知。
问题
- 菜单栏层级列数都不确定，需要根据后端数据渲染，怎么处理？
这边需要用到组件递归。项目用的是element的el-menu。 - 菜单栏层级列数都不确定，每个栏位需要请求不同的接口获取数据，且要渲染到对应栏位展示。不确定的多层栏位怎么请求接口。
设置了一个变量，将菜单栏赋值。然后变量递归，根据获得的接口数据对变量参数进行修改。 - 且怎么更新多不确定的多层栏位的组件上？
对组件进行ref设置。递归组件的refs，依次强制更新。 - 点击菜单栏跳转不同详情页面，栏位数量未知那详情页面也位置，页面怎么处理才能实时根据不同菜单展示数据？
和后端确定，栏位信息设置type，且type相同需要跳转相同模版页面，根据携带的数据不同，页面展示不同数据。router-view使用keep-alive，将路由信息设置为key。这样路由信息不同页面会重新actived。再设置几套页面模板。根据type不同跳转不同模板进行页面渲染。 - 详情页面的信息都在菜单栏上，怎么在点击的时候能取得这些栏位信息。
可以放在路由meta上，点击菜单的时候动态设置meta。详情页进去的时候，钩子函数监听获取这些数据。 - 层级未知，父节点数量需要将所有子节点栏位加起来，怎么相加？
使用computed，传入你当前节点的数据，递归数据当前节点数据。这样可以计算你下面所有子节点的数量。
// index.vue 父组件 菜单栏部分
<template>
<el-menu :default-active="defalutActive" @select="menuSelect">
<el-menu-item class="gray" index="-1">
<span class="total">
总数：
<em>{{ totalCount || 0 }}</em>
</span>
</el-menu-item>
<deep-menu :menuData.sync="allNav" ref="deepMenu" />
</el-menu>
</template>
<script>
export default {
methods: {
//循环菜单栏获取数量
loadCount() {
let vue = this;
if (!vue.keyword) {
vue.loading;
return;
}
vue.loading = false;
this.totalCount = 0;
var allNav = JSON.parse(JSON.Stringify(this.allNav));
allNav.forEach((element, index) => {
deepArray(element);
});
//数组递归 请求接口获取数量
function deepArray(element) {
if (element.isShow !== 1) return;
if (element.children.length > 0) {
element.count = 0;
element.children.forEach((ele, idx) => {
deepArray(ele);
});
} else {
vue.getCount(element).then((count) => {
// 获取栏位数量之后更新组件，数量
element.count = count;
vue.totalCount += count;
vue.allNav = allNav;
vue.$refs.deepMenu.reload();
});
}
}
},
//请求url获取数量
getCount(ele) {
return new Promise((resolve, reject) => {
if (!ele.hasownProperty("countUrl") || !ele.countUrl) return;
commonAxios("post", "/search/" + ele.countUrl + "/count", {
keyword: this.keyword,
}).then((res) => {
if (res && res["intCode"] && res["intCode"] == "200") {
return resolve(Number(res["data"].total) || 0);
} else {
this.$message.error((res && res["message"]) || "数据获取失败!");
}
});
});
},
},
};
</script>// deep-menu.vue
<--
@Date:2021-08-2709:04:10
*@LastEditTime:2021-08-2715:12:29
@Description :智搜菜单栏深度嵌套
-->
<template>
<div>
<div v-for="(items, indexs) in menuData" :key="items.id">
<el-menu-item
v-if="(items.isShow = 1 && items.children.length == 0)"
:index="indexs + \'-\' + items.id"
>
<span slot="title">
{{items.name} }
<em class="fn-right">{{ menuCount(items) }} </em> //计算数量
</span>
</el-menu-item>
<el-submenu
v-else-if="items.isShow === 1 && items.children.length > 0"
:index="indexs + \'-\' + items.id"
>
<template slot="title">
<span>
{{ items.name }}
<em class="fn-right">{{ menuCount(items) }} </em>
</span>
</template>
<deep-menu
menuData.sync="items.children"
:ref="\'deepMenu-\' + items.id"
/>
</el-submenu>
</div>
</div>
</template>
<script>
export default {
name: "deepMenu",
props: {
menuData: {
type: Array | Object,
defalut: [],
},
},
computed: {
//计算该节点下面所有子节点的数量相加
menuCount() {
return function (element) {
let ls_return = 0;
deepAdd(element);
return ls_return;
function deepAdd(element) {
if (element.children.length > 0) {
element.children.forEach((ele) => {
deepAdd(ele);
});
} else {
ls_return += Number(element.count) || 0;
}
}
};
},
},
methods: {
reload() {
this.$forceUpdate();
deepUpdate(this.$refs);
function deepUpdate(element) {
if (Object.prototype.toString.call(element) == "[object Object]") {
for (let key in element) {
let ls_ref = element[key][0].$refs;
element[key][0].$forceUpdate();
if (Object.keys(ls_ref).length > e) {
element[key][e].$forceUpdate();
deepUpdate(ls_ref);
}
}
}
}
},
},
};
</script>以上是关于html怎么获取动态数据？的主要内容，如果未能解决你的问题，请参考以下文章
后台传回的Json数据怎么在HTML表单中显示并能动态编辑(添加、删除)