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>
DUO43433931回答
-
_潇潇暮雨
ajax就是为了防止页面刷新啊。打开chrome的network面板可以看到返回的数据是什么么？
随时随地看视频慕课网APP
Html/CSS
Java
JavaScript