通过双击文本触发事件，实现下拉列表动态加载数据库中的用户名，并完成选择与展示。
它的效果是这样的: 双击文本"click here",触发select的ondblclick事件,该区域变为一个下拉列表框,并利用phprpc动态读出数据库中的所有用户;然后选择其中的一项,触发select的onchang事件,从数据库中读出该用户名,下拉列表消失,该文本区域显示选中的用户名.当然还有一个效果是当触发select的onblur事件,下拉列表消失,显示先前的文本区域.
听着有些晕,这个东东你在网页上操作不过几秒中的事,但正是这个 效果花了我几天的时间,不过很高兴我没有半途而废,以后还做更多与数据库交互的例子.加油哦!!!
客户端的getuser.html:
<html>
<TITLE> get users </TITLE>
<head>
<script type="text/javascript" src="phprpc_client.js"></script>
</head>
<body>
<div align="center">
<input type="button" value="提交" id="loginbtn" />
</div>
<div id="feedback">
</div>
<div id="names"><span id="spantext">click here</span></div>
<script type="text/javascript">
function clear_select(so) {
for (var i = so.options.length - 1; i > -1; i--) {
if (so.options.remove) {
so.options.remove(i);
}
else {
so.removeChild(so.options[i]);
}
}
}
var names = document.getElementById('names');
var spantext = document.getElementById('spantext');
var select = document.createElement('select');
select.id="username";
var feedback = document.getElementById('feedback');
var rpc_client = new PHPRPC_Client('http://localhost:8080/phprpc/getuser/server_user.jsp', ['getuser','QueryUser']);
document.getElementById("names").ondblclick= function() {
clear_select(select);
feedback.innerHTML = "waiting...";
names.removeChild(spantext);
names.appendChild(select);
rpc_client.getuser(function (result) {
feedback.innerHTML= result;
for (var j = 0;j<result.length; j++) {
var opt = document.createElement('option');
opt.text = result[j];
opt.value =j+1;
select.options.add(opt);
}
});
}
select.onblur= function() {
names.removeChild(select);
names.appendChild(spantext);
}
select.onchange= function() {
var optionvalue = document.getElementById('username').value;
names.removeChild(select);
rpc_client.QueryUser(optionvalue,function (result) {
spantext.innerHTML= result;
names.appendChild(spantext);
});
}
</script>
</body>
</html>
服务器端的server_user.jsp:
<%@ page import="org.phprpc.*" %>
<%@ page import="user.*" %>
<%
PHPRPC_Server phprpc_server = new PHPRPC_Server();
GetUser get=new GetUser();
phprpc_server.add(new String[] { "getuser", "QueryUser" }, get);
phprpc_server.start(request, response);
%>
类就不用说了
听着有些晕,这个东东你在网页上操作不过几秒中的事,但正是这个 效果花了我几天的时间,不过很高兴我没有半途而废,以后还做更多与数据库交互的例子.加油哦!!!
客户端的getuser.html:
<html> <TITLE> get users </TITLE><head><script type="text/javascript" src="phprpc_client.js"></script></head><body><div align="center"><input type="button" value="提交" id="loginbtn" /></div><div id="feedback"></div><div id="names"><span id="spantext">click here</span></div> <script type="text/javascript"> 
function clear_select(so) {
for (var i = so.options.length - 1; i > -1; i--) { if (so.options.remove) { so.options.remove(i); } else { so.removeChild(so.options[i]); } }} var names = document.getElementById('names'); var spantext = document.getElementById('spantext'); var select = document.createElement('select'); select.id="username"; var feedback = document.getElementById('feedback'); var rpc_client = new PHPRPC_Client('http://localhost:8080/phprpc/getuser/server_user.jsp', ['getuser','QueryUser']); document.getElementById("names").ondblclick= function() { clear_select(select); feedback.innerHTML = "waiting..."; names.removeChild(spantext); names.appendChild(select); rpc_client.getuser(function (result) { feedback.innerHTML= result; for (var j = 0;j<result.length; j++) { var opt = document.createElement('option'); opt.text = result[j]; opt.value =j+1; select.options.add(opt); } }); } select.onblur= function() { names.removeChild(select); names.appendChild(spantext); } select.onchange= function() { var optionvalue = document.getElementById('username').value; names.removeChild(select); rpc_client.QueryUser(optionvalue,function (result) { spantext.innerHTML= result; names.appendChild(spantext); }); } </script> </body></html> <%@ page import="org.phprpc.*" %> <%@ page import="user.*" %> <% PHPRPC_Server phprpc_server = new PHPRPC_Server(); GetUser get=new GetUser(); phprpc_server.add(new String[] { "getuser", "QueryUser" }, get); phprpc_server.start(request, response); %> 
扫一扫
2130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
