极客观点
项目管理
HarmonyOS
比如说A页面使用了ajax，在div中显示了B页面。
然后B页面中的一个块也用到了ajax要显示C页面的内容。
A页面可以显示B页面的内容，但是B页面的onclick()报错了,无法显示C页面。
如果直接访问B页面，也就是只用一次ajax时，B页面中的div是可以显示C页面。
SearchFriend.jsp
<%@ page language="java" import="java.util.*,java.sql.*"
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="beans.User"%>
<%@ page import="dao.OperateDB"%>
<%
User u = new User();
OperateDB oDB = new OperateDB();
u = oDB.getUserByUsername((String) (session
.getAttribute("username")));
ArrayList<User> userFriends = oDB.getAllFriendsOf(u);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<title>寻找好友</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.my-container {
width: 970px;
margin: 80px auto 0px auto;
}
.nav-list {
width: 370px;
height: 40px;
}
.forCenter {
background: #F3F3F3;
width: 650px;
margin: 50px auto 0px auto;
border: 1px solid #CCC;
border-radius: 4px;
padding-top: 10px;
}
.nav-list a {
display: block;
width: 120px;
text-align: center text-decoration: none;
}
.nav-list li a:hover {
background: #108AC6;
color: #FFFFFF;
text-decoration: none;
line-height: 29px;
}
.nav-list ul, .nav-list li {
list-style: none;
text-align: center;
line-height: 30px;
background: #FAFAFA;
float: left;
}
.my-input {
float: left;
width: 400px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
function showResult() {
var xmlHttp = false;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
window.alert("该浏览器不支持Ajax");
}
}
}
var username = document.getElementById("input-username").value;
if (username != null && username != "") {
username = encodeURI(username);
xmlHttp.open("POST", "ShowSearchResult.jsp?username=" + username,
true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
showSearchResult.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send();
}
}
</script>
</head>
<body>
<jsp:include page="Nav.jsp"></jsp:include>
<div class="my-container">
<div class="nav-list">
<ul>
<li><a href="Friend.jsp">好友管理</a></li>
<li><a href="SearchFriend.jsp">寻找好友</a></li>
<li><a href="###">看看有什么要补充</a></li>
</ul>
</div>
<div class="forCenter">
<form class="form-horizontal" method="post">
<div class="form-group">
<div class="my-input">
<input type="text" class="form-control " name="username"
id="input-username" placeholder="用户名">
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button"
onclick="showResult();">搜索</button>
</span>
</div>
</form>
<div id="showSearchResult" class="showSearchResult"></div>
</div>
</div>
</body>
</html>
ShowSearchResult.jsp
<%@ page language="java" import="java.util.*,java.sql.*"
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="beans.User"%>
<%@ page import="dao.OperateDB"%>
<%
User u = new User();
OperateDB oDB = new OperateDB();
u = oDB.getUserByUsername((String) (session
.getAttribute("username")));
User user = new User();
String username = request.getParameter("username");
if (username != null) {
user = oDB.getUserByUsername(username);
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet"
href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<title>我的好友</title>
<style type="text/css">
.comment-input {
border: 1px solid;
min-width: 600px;
max-width: 600px;
min-height: 30px;
}
.comment-state {
border: 1px solid;
width: 80px;
height: 40px;
}
</style>
<script type="text/javascript">
function showTextarea(uID, userID) {
var textdiv = document.getElementById("text-input");
if (textdiv.style.display == "" || textdiv.style.display == "none") {
var textarea = document.createElement("textarea");
textarea.className = "comment-input";
textarea.id = "text";
var input = document.createElement("input");
input.clssName = "comment-state";
input.id = "btn";
input.type = "button";
input.value = "发表";
input.onclick = function() {
sendAddFriend(uID, userID);
}
textdiv.appendChild(textarea);
textdiv.appendChild(input);
textdiv.style.display = "block";
} else {
textdiv.removeChild(document.getElementById("text"));
textdiv.removeChild(document.getElementById("btn"));
textdiv.style.display = "none";
}
}
function sendAddFriend(uID, userID) {
var xmlHttp = false;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
window.alert("该浏览器不支持Ajax");
}
}
}
var text = document.getElementById("text").value;
if (text != null && text != "") {
text = encodeURI(text);
xmlHttp.open("POST", "SendMessage.jsp?uID=" + uID + "&userID="
+ userID + "&text=" + text, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
sendMessageInfo.innerHTML = xmlHttp.responseText;
}
}
xmlHttp.send();
} else {
alert("请输入评论内容");
document.getElementById("text").focus;
}
document.getElementById("text").value = "";
}
</script>
</head>
<body>
<div>
<%
if (user != null) {
out.print(user.getPicture() + "<br>");
out.print(user.getUserID() + "<br>");
out.print(user.getUsername() + "<br>");
out.print(user.getAge() + "<br>");
out.print(user.getSex() + "<br>");
out.print(user.getAddress() + "<br>");
out.print("<input type='button' value='加好友' onclick='showTextarea("
+ u.getUserID() + "," + user.getUserID() + ");'>");
out.print("<div id='text-input'></div>");
out.print("<div id='sendMessageInfo'></div>");
} else {
out.print(username + " 不存在");
}
%>
</div>
</body>
</html>
SendMessage.jsp
<%@ page language="java" import="java.util.*,java.sql.*"
contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="beans.User"%>
<%@ page import="dao.OperateDB"%>
<%
User u = new User();
User user1=new User();
User user2=new User();
OperateDB oDB = new OperateDB();
u = oDB.getUserByUsername((String) (session
.getAttribute("username")));
String uid = request.getParameter("uID");
String userid = request.getParameter("userID");
String text = request.getParameter("text");
if (uid != null&&uid!="") {
int userid1 = Integer.parseInt(uid);
user1=oDB.getUserByUserID(userid1);
}
if (userid != null&&userid!="") {
int userid2 = Integer.parseInt(userid);
user2=oDB.getUserByUserID(userid2);
}
oDB.sendAddFriendMessage(user1, user2, text);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>发送消息</title>
</head>
<body>
请求已发送
</body>
</html>
点击没反应，调试报错
在IE调试下报了方法未定义的错误。我觉得可能是不能在A页面找到B页面的js方法。
直接访问B页面，点击加好友可以弹出输入框
如何解决此问题，不能用ajax块嵌套一个ajax块（暂且我就这样描述吧）吗？
页面是jsp写的，css，js和html都没分开写。用了JavaBean和dao封装了些东西。
感觉@浅黑色 的回答可能是答案涉及的。可是本人对js了解不多，边学边做。期待有原生js的回答。
按照你的叙述：b页面属于新添加内容，一般的点击事件是不行的，需要了解下事件委托。