触发不了事件
<style type="text/css">
*{
margin : 0;
padding : 0;
text-decoration: none;
}
#divList{
width: 99%;
margin : 0 auto;
overflow: hidden;
}
.btn{
float : left;
width: 33%;
text-align: center;
margin : 3px
}
input[type=button]{
width: 100%;
height :30px;
}
</style><div id = "divList"> <div class="btn"><a href="emp_list?num=1"><input type="button" value="员工列表"></a></div> <div class="btn"><a href="emp_list?num=2"><input type="button" value="职位列表"></a></div> <div class="btn"><a href="emp_list?num=3"><input type="button" value="部门列表"></a></div> </div> <div id = "list"></div>
<script type="text/javascript">
var input = document.getElementsByTagName("input");
input[0].onclick = function(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");
}
xmlhttp.open("get","/ajax/emp_list",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
console.log(readyState);//无显示，说明没触发
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//接收到的是json字符串，需要转化成json对象
var text = xmlhttp.responseText;
//console.log(text);
var json = JSON.parse(text);
console.log(json);//无显示
var html = "";
for(var i = 0;i< json.length;i ++){
html = html + "<p>"+ json[i] +"</p>"
}
document.getElementById("list").innerHTML = html;
}
}
}
</script>protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Integer num = Integer.parseInt(request.getParameter("num"));
String json = "";
response.setContentType("text/html;charset=UTF-8");
if(num == 1) {
//创建名字集合
List<String> enameList = new ArrayList<String>();
enameList.add("小明");
enameList.add("小红");
enameList.add("小刚");
json = JSON.toJSONString(enameList);
response.getWriter().println("<p>"+json+"</p>");//这种方式会覆盖原来的HTML信息
}else if(num == 2) {
//创建职位集合
List<String> postList = new ArrayList<String>();
postList.add("职员");
postList.add("经理");
json = JSON.toJSONString(postList);
request.getSession().setAttribute("json", json);
request.getRequestDispatcher("/emp_list.jsp").forward(request, response);//转发
}else if(num == 3){
//创建部门集合
List<String> departList = new ArrayList<String>();
departList.add("人事部");
departList.add("技术部");
departList.add("无线事业部");
json = JSON.toJSONString(departList);
request.getSession().setAttribute("json", json);
request.getRequestDispatcher("/emp_list.jsp").forward(request, response);
}else {
response.getWriter().println("<b style = 'color : red'>出错了</b>");
}
}注解：@WebServlet("/emp_list")
3
收起
正在回答
2回答
同学你好。按照同学的代码逻辑，是无法触发js函数的。这里使用js绑定onclick事件就不必再使用a标签了。否则只是进入了Servlet后重新转发到了页面上。另外，使用ajax不必再Servlet中进行转发，而是由ajax控制，进入让Servlet做一些处理以后，返回xmlhttp.onreadystatechanage处继续进行操作。
另外，直接使用readyState浏览器是无法解析的。需要改为xmlhttp.readyState
因此，同学的代码可以调整成这样：
<body>
<div id="divList">
<div class="btn">
<input type="button" value="员工列表">
</div>
<div class="btn">
<input type="button" value="职位列表">
</div>
<div class="btn">
<input type="button" value="部门列表">
</div>
</div>
<div id="list"></div>
<div id="content" align="center"></div>
<script type="text/javascript">
var input = document.getElementsByTagName("input");
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");
}
input[0].onclick = function() {
xmlhttp.open("get", "/ajax/emp_list?num=1", true);
xmlhttp.send();
xmlhttp.onreadystatechange = function() {
console.log(xmlhttp.readyState);//无显示，说明没触发
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//接收到的是json字符串，需要转化成json对象
var text = xmlhttp.responseText;
//console.log(text);
var json = JSON.parse(text);
console.log(json);//无显示
var html = "";
for (var i = 0; i < json.length; i++) {
html = html + "<p>" + json[i] + "</p>"
}
document.getElementById("list").innerHTML = html;
}
}
}
</script>
</body>Integer num = Integer.parseInt(request.getParameter("num"));
String json = "";
response.setContentType("text/html;charset=UTF-8");
if(num == 1) {
//创建名字集合
List<String> enameList = new ArrayList<String>();
enameList.add("小明");
enameList.add("小红");
enameList.add("小刚");
json = JSON.toJSONString(enameList);
//request.getSession().setAttribute("json", json);
//response.getWriter().println("<p>"+json+"</p>");//这种方式会覆盖原来的HTML信息
}else if(num == 2) {
//创建职位集合
List<String> postList = new ArrayList<String>();
postList.add("职员");
postList.add("经理");
json = JSON.toJSONString(postList);
//request.getSession().setAttribute("json", json);
//request.getRequestDispatcher("/test.html").forward(request, response);//转发
}else if(num == 3){
//创建部门集合
List<String> departList = new ArrayList<String>();
departList.add("人事部");
departList.add("技术部");
departList.add("无线事业部");
json = JSON.toJSONString(departList);
//request.getSession().setAttribute("json", json);
//request.getRequestDispatcher("/test.jsp").forward(request, response);
}else {
response.getWriter().println("<b style = 'color : red'>出错了</b>");
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().println(json);如果解答了同学的疑问，望采纳~
祝学习愉快~
芝芝兰兰
2019-04-10 17:50:40
同学你好。这里的input应该是同学var input = document.getElementsByTagName("input");这句话获取到的input，这里是获取到所有标签名为input的元素，所以是一个数组，里面的每个元素都是一个input元素，按照页面中编写的先后顺序排列。
for (var i = 0;i < input.length; i++) {
input[i].index = i;//什么作用？
input[i].onclick = function(){
var j = this.index + 1;
xmlhttp.open("get","/ajax/emp_list?num="+j,true);
xmlhttp.send();这里使用input[i].index = i; 将for循环中使用的下标 i 存储到input元素的index里，这样方便在触发单击事件时，在内部函数中可以获得input在数组中的下标。不能直接使用i，因为i在for循环中定义，在点击input时，页面一定是已加载的，这里i就是一个固定值了。
如果解答了同学的疑问，望采纳~
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
2. 从网页搭建入门JavaWeb
- 参与学习 人
- 提交作业 676 份
- 解答问题 9666 个
本阶段将从前端网页搭建入手，到Java Web基础，前后端结合助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星