phpstudy集成环境

 首页 > 在ajax显示块里再次应用ajax，js报方法未定义

在ajax显示块里再次应用ajax，js报方法未定义

比如说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页面中并没有定义这个方法.
或者说你加载B页面进div时,b页面里的脚本并未被执行,所以函数未定义.

按照你的叙述：b页面属于新添加内容，一般的点击事件是不行的，需要了解下事件委托。

【热门文章】
【热门文章】