文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
javascript - 在ajax显示块里再次应用ajax，js报方法未定义
高洛峰
高洛峰 2017-04-10 15:25:27
[JavaScript讨论组]
0 1 311
举报

比如说A页面使用了ajax，在p中显示了B页面。
然后B页面中的一个块也用到了ajax要显示C页面的内容。
A页面可以显示B页面的内容，但是B页面的onclick()报错了,无法显示C页面。
如果直接访问B页面，也就是只用一次ajax时，B页面中的p是可以显示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>
    <p class="my-container">
        <p class="nav-list">
            <ul>
                <li><a href="Friend.jsp">好友管理</a></li>
                <li><a href="SearchFriend.jsp">寻找好友</a></li>
                <li><a href="###">看看有什么要补充</a></li>
            </ul>
        </p>
        <p class="forCenter">
            <form class="form-horizontal" method="post">
                <p class="form-group">

                    <p class="my-input">
                        <input type="text" class="form-control " name="username"
                            id="input-username" placeholder="用户名">
                    </p>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button"
                            onclick="showResult();">搜索</button>
                    </span>
                </p>
            </form>

            <p id="showSearchResult" class="showSearchResult"></p>
        </p>
    </p>
</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 textp = document.getElementById("text-input");

    if (textp.style.display == "" || textp.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);
        }
        textp.appendChild(textarea);
        textp.appendChild(input);
        textp.style.display = "block";

    } else {
        textp.removeChild(document.getElementById("text"));
        textp.removeChild(document.getElementById("btn"));
        textp.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>
    <p>
        <%
            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("<p id='text-input'></p>");
                out.print("<p id='sendMessageInfo'></p>");
            } else {
                out.print(username + " 不存在");
            }
        %>
    </p>
</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的回答。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

全部回复(1)
PHPz
PHPz2017-04-10 15:27:27 1楼

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

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部