猿问

JSP页面,自己点击发布问题,AJAX刷新页面之后,弹不出回复层,在线等,求解决。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<title>Insert title here</title>
</head>
<style type="text/css">
#nav {
    width: 1200px;
    height: 80px;
    background-color: #eeeeee;
    margin-left: 75px;
}

.h5 {
    margin-left: 100px;
    margin-top: 30px;
    height: 30px;
    width: 95px;
}

.i1 {
    background-color: red;
    width: 50px;
    height: 25px;
}

.c2 {
    width: 800px;
    height: 80px;
    display: none;
    position: absolute;
    margin-left: 400px;
    margin-top: -60px;
}

.i2 {
    margin-top: 30px;
    width: 250px;
    height: 25px;
}

.i1 {
    width: 55px;
    height: 30px;
}

.c3 {
    background-color: #EEEEEE;
    margin-top: 5px;
    width: 1200px;
    height: 500px;
    margin-left: 75px;
}

.c4 {
    background-color: skyblue;
    margin-top: 5px;
    width: 400px;
    height: 500px;
    margin-left: 75px;
}

.hfc {
    display: none;
    position: absolute;
    margin-top: 200px;
    margin-left: 600px;
    width: 400px;
    height: 200px;
    background-color: skyblue;
}

.htct {
    width: 300px;
    height: 80px;
    background-color: red;
}
</style>
<script src="../js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    var xmlHttp;
    function createXMLHttpRequest() {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (tryMS) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (otherMS) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (failed) {
                    xmlHttp = null;
                    // 这里可以报一个错误无法获得 XMLHttpRequest对象    
                }
            }
        }
        return xmlHttp;
    }
    function loadJSON() {
        var aa = document.getElementById("q_nr").value;

        //1.创建XMLHttpRequest对象
        xmlHttp = createXMLHttpRequest();
        //2.将状态触发器绑定到一个函数
        xmlHttp.onreadystatechange = getJson;
        //3.使用open方法建立与服务器的连接
        xmlHttp.open("post",
                "${pageContext.request.contextPath}/lt/wt.do?u_id=${login.u_id}&q_nr="
                        + aa + "");
        //4.向服务器端发送数据
        //xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
        xmlHttp.send(null);
    }
    //5.在回调函数中对返回数据进行处理
    function getJson() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                //将JSON字符串转为JS对象
                var obj = eval("(" + xmlHttp.responseText + ")");

                var msg = "<table><tr><th>问题id</th><th>用户id</th><th>问题</th><th>回复</th></tr>";
                for ( var i = 0; i < obj.length; i++) {
                    msg += "<tr><td>" + obj[i].q_id + "</td>";
                    msg += "<td>" + obj[i].u_id + "</td>";
                    msg += "<td>" + obj[i].q_nr + "</td>";
                    msg += "<td>"
                            + "<input type='button' value='回复' class='h4' >"
                            + "<input type='hidden' value='obj[i].q_id' name='q_id' id='q_id'>"
                            + "</td>";
                    msg += "</tr>";
                }
                msg += "</table>";

                document.getElementById("myDiv").innerHTML = msg;
            } else if (xmlHttp.status == 404) {

            } else if (xmlHttp.status == 500) {

            }
        }
    }

    $(".h4").click(function() {
        if ($(".hfc").is(":hidden")) {
            $(".hfc").show();
        } else {
            $(".hfc").hide();
        }
    });
    function pltest(o)
    {
        var a_nr = o.value;
        //alert(a_nr);
        document.getElementById("q_id3").value=a_nr;
    }
    
    function pl() {
        var q_id = document.getElementById("q_id3").value;
        var a_nr = document.getElementById("a_nr").value;
        
        //1.创建XMLHttpRequest对象
        xmlHttp = createXMLHttpRequest();
        //2.将状态触发器绑定到一个函数
        xmlHttp.onreadystatechange = getJson1;
        //3.使用open方法建立与服务器的连接
        alert(q_id);
        alert(a_nr);
        xmlHttp.open("post",
                "${pageContext.request.contextPath}/lt/hf.do?u_id=${login.u_id}&q_id="
                        + q_id + "&a_nr=" + a_nr + "");
        //4.向服务器端发送数据
        //xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
        xmlHttp.send(null);
    }
    //5.在回调函数中对返回数据进行处理
    function getJson1() {
        if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
                //将JSON字符串转为JS对象
                var obj = eval("(" + xmlHttp.responseText + ")");

                var msg = "<table><tr><th>问题id</th><th>用户id</th><th>问题</th><th>回复</th></tr>";
                for ( var i = 0; i < obj.length; i++) {
                    msg += "<tr><td>" + obj[i].q_id + "</td>";
                    msg += "<td>" + obj[i].u_id + "</td>";
                    msg += "<td>" + obj[i].q_nr + "</td>";
                    msg += "<td>"
                            + "<input type='button' value='回复' class='h4' >"
                            +  "</td>";
                    msg += "</tr>";
                }
                msg += "</table>";

                document.getElementById("myDiv").innerHTML = msg;
            } else if (xmlHttp.status == 404) {

            } else if (xmlHttp.status == 500) {

            }
        }
    }
</script>
<body>
<input type="hidden" id="q_id3"/>
    <div id="nav">
        <input type="button" value="发布问题" class="h5" />
        <div class="c2">
            <input type="text" class="i2" name="q_nr" id="q_nr" /> <input
                type="button" value="提交" onclick="loadJSON()" class="i1" />
        </div>
        <script type="text/javascript">
            $(".h5").click(function() {
                if ($(".c2").is(":hidden")) {
                    $(".c2").show();
                } else {
                    $(".c2").hide();
                }
            });
        </script>
    </div>
    <div class="c3">
        <div class="c4" id="myDiv">
            <table>
                <c:forEach items="${lt1}" var="lt2">
                    <tr>
                        <td>问题id${lt2.q_id}</td>
                        <td>用户id${lt2.u_id}</td>
                        <td>问题 ${lt2.q_nr}</td>
                        <td><input type="button" value="${lt2.q_id}" id="q_id"
                            class="h4" onclick="pltest(this)" /></td>

                    </tr>
                </c:forEach>
                
                <div class="hfc">
                    <input type="text" id="a_nr" /> <input type="button" value="评论"
                        class="htcs" onclick="pl()"  />
                    <div class="htct" id="htct"></div>
                </div>
                <script type="text/javascript">
                    $(".h4").click(function() {
                        if ($(".hfc").is(":hidden")) {
                            $(".hfc").show();
                        } else {
                            $(".hfc").hide();
                        }
                    });
                </script>
            </table>
        </div>
    </div>
</body>
</html>



DUO4343393
浏览 1523回答 1
1回答

_潇潇暮雨

ajax就是为了防止页面刷新啊。打开chrome的network面板可以看到返回的数据是什么么?
随时随地看视频慕课网APP
我要回答