JS調(diào)用后臺數(shù)據(jù)查詢，讓查詢到的數(shù)據(jù)在下拉列表里顯示
3 回答
紅顏莎娜
TA貢獻1842條經(jīng)驗 獲得超13個贊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /** * @author zhou2003737 * @date 2014/09/25 16:39 */ <html doctype="html"> <head> <title></title> <script type="text/javascript"> window.onload = function(){ //獲取文本框?qū)ο?/p> var searchText = document.getElementById("searchText"); //獲取提交button對象 var action = document.getElementById("action"); //獲取要增加到的下拉列表對象 var selections = document.getElementById("selections"); //點擊提交的時候執(zhí)行的方法 action.onclick = function(){ //如果文本框?qū)ο笾兄挡粸榭?/p> if(searchText.value ){ //根據(jù)文本框中的值循環(huán)5次 for(var i =5;i>0;i--){ //設(shè)置下拉列表中的值的屬性 var option = document.createElement("option"); option.value = searchText.value + i; option.text= searchText.value+i; //將option增加到下拉列表中。 selections.options.add(option); } } } } //思路如上。你可以將點擊時將文本框中值傳到后臺，后臺返回數(shù)據(jù)后，在將數(shù)據(jù)存入下拉列表對象中。 </script> </head> <body> <p><input type="text" placeholder="請輸入查詢對象" autofocus id="searchText"/></p> <p><input type="button" id="action" value="提交"/></p> <p><select id="selections">
</select></p> </body> </html> |
一只斗牛犬
TA貢獻1784條經(jīng)驗 獲得超2個贊
首先自定義一個ajax獲取要顯示在html頁面上的數(shù)據(jù)的方法，例如方法getdata,這個方法把獲取的返回值，通過js動態(tài)的顯示到html頁面要顯示的區(qū)域，然后再寫一個js定時器來實現(xiàn)實時調(diào)用數(shù)據(jù)，
示例：
<script>
//定時器 異步運行
function hello(){
alert("hello");
}
var t2 = window.setTimeout("hello()",3000); //定時器
//window.clearTimeout(t2);//去掉定時器
</script>
把里面的hello方法換成你ajax獲取數(shù)據(jù)的方法名，然后改下定時器里面的方法名和時間，這里設(shè)置的是3秒鐘執(zhí)行一次可以設(shè)置成你自己要的數(shù)據(jù)，就實現(xiàn)了你要的頁面實時調(diào)用數(shù)據(jù)了。
函數(shù)式編程
TA貢獻1807條經(jīng)驗 獲得超9個贊
1、用戶界面能做的最基礎(chǔ)的事情就是呈現(xiàn)一些數(shù)據(jù)，React讓顯示數(shù)據(jù)變得簡單，當數(shù)據(jù)變化時，用戶界面會自動同步更新。
2、通過例子進行了解：
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<divid="example"></div>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text"placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
},500);
</script>
</body>
</html>
添加回答
舉報
0/150
提交
取消