2-8自由编程
来源：2-8 自由编程
qq_慕UI0173712
2019-09-26 00:41:28
不知道为什么这样做就会出粗，不太懂这里点击按钮的时候，就能出现相应的内容
这是test2.html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<input type="submit" value="A" id="A1"/>
<input type="submit" value="B" id="B1"/>
<input type="submit" Value="C"/>
<div id="peo"></div>
<body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
//1.创建XmlHttpResquest
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送Ajax请求
xmlhttp.open("GET","/jQuery/test2_list",true);
xmlhttp.send();
//3.处理服务器响应
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState ==4&& xmlhttp.status ==200){
var textA= xmlhttp.responseText;
console.log(textA);
var json=JSON.parse(textA);
console.log(json);
var html="";
for (var i=0;i<json.length;i++){
var people =json[i];
html=html+"<h2>"+people+"</h2>";
}
//-----------------
var textB= xmlhttp.responseText;
console.log(textB);
var jsonB=JSON.parse(textB);
console.log(jsonB);
var htmlB="";
for (var i=0;i<jsonB.length;i++){
var peopleB =jsonB[i];
htmlB=htmlB+"<h2>"+peopleB+"</h2>";
}
$("#A1").on("click",function(){
document.getElementById("peo").innerHTML=html;
})
$("#B1").on("click",function(){
document.getElementById("peo").innerHTML=htmlB;
})
}
}
</script>
</body>
</html>这是test2Servlet的代码
package com.winking.Ajax;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
/**
* Servlet implementation class test2Servlet
*/
@WebServlet("/test2_list")
public class test2Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public test2Servlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List listA=new ArrayList();
listA.add("A1");
listA.add("A2");
listA.add("A3");
List listB=new ArrayList();
listB.add("B1");
listB.add("B2");
listB.add("B3");
List listC=new ArrayList();
listC.add("C1");
listC.add("C2");
listC.add("C3");
String jsonA =JSON.toJSONString(listA);
System.out.print(jsonA);
response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(jsonA);
//
String jsonB =JSON.toJSONString(listB);
System.out.print(jsonB);
// response.setContentType("text/html;charset=UTF-8");
response.getWriter().println(jsonB);
//
// String jsonC =JSON.toJSONString(listC);
// System.out.print(jsonC);
// response.setContentType("text/html;charset=UTF-8");
// response.getWriter().println(jsonC);
}
}写回答
1回答
-
同学你好，1、这里我们可以为每个按钮添加一个单击事件，在这个单击事件中发送ajax请求，得到响应数据，将数据展示到页面中，但是同学贴出的代码是在一个ajax请求中添加事件，这样的写法在解析时，可能出现问题，这里同学可以参考https://class.imooc.com/course/qadetail/124368 这个问答中的代码来修改一下自己代码。
获取当前的按钮，添加单击事件，在当前事件中发送ajax请求，得到响应数据，展示到页面
2、注意按钮为submit是form的提交按钮，这里建议改为button，一个普通按钮。
如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~
0
相似问题