                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /Ajax全接觸

jsp如何實現這個案例啊

有人用jsp做這個案例成功了嗎？有的話可以分享給我參考看看嗎

慕仔1451063

2018-06-12

源自：Ajax全接觸 3-2

關注問題我要回答

1184

操作

收起

1 回答

typeh
2018-06-17

我也是剛剛看到這里，我只做了一個小的模仿，只做了第一小題的簡化版，關鍵點在于前后端的數據是如何傳遞的，理解了第一題我覺得第二題肯定也不會太難做，希望能夠幫到你。

????????????????????????????這是后端的servlet代碼，我寫的很簡單，希望不要嫌棄。

????????????????????????

前端代碼：

<%@?page?language="java"?import="java.util.*"?pageEncoding="utf-8"%>
<%
String?path?=?request.getContextPath();
String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">
<html>
??<head>
????<base?href="<%=basePath%>">
????
????<title>My?JSP?'index.jsp'?starting?page</title>
<meta?http-equiv="pragma"?content="no-cache">
<meta?http-equiv="cache-control"?content="no-cache">
<meta?http-equiv="expires"?content="0">????
<meta?http-equiv="keywords"?content="keyword1,keyword2,keyword3">
<meta?http-equiv="description"?content="This?is?my?page">
<!--
<link?rel="stylesheet"?type="text/css"?href="styles.css">
-->
<script?type="text/javascript">
window.onload=function(){
document.getElementById("username").onblur=function(){
var?xmlhttp?=?null;
if(window.XMLHttpRequest)
xmlhttp?=?new?XMLHttpRequest();
else
xmlhttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",?"http://localhost:8080/myfirstwebapp/cat?username="+document.getElementById("username").value.toString());
xmlhttp.send();
xmlhttp.onreadystatechange?=?function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200)
document.getElementById("queryUserName").innerHTML?=?xmlhttp.responseText;
};
}
document.getElementById("username").onfocus=function(){
document.getElementById("queryUserName").innerHTML?=?"";
}
}
</script>
??</head>
??
??<body>
????<h2?style="color:red;">測試ajax程序</h2>
????<form?action="">
????用戶名：<input?id="username"?type="text"?name="username">&nbsp;&nbsp;
????<span?id="queryUserName"?style="color:red;"></span>
????</form>
??</body>
</html>