我在使用ajax创建“查看更多”选项时遇到问题。我的HTML代码如下
<body>
//this page is index.jsp
<%
System.out.println("here in class");
ClassA class_object = new ClassA();
List list = class_object.getListValue();//gives me 6 random values
%>
<div id="div1">
<div id="div2">
<%
if (list != null) {
int count = 0;
for (int i = 0; i < list.size(); i++) {
%>
<div class="value">
<%=list.get(i)%>
</div>
<%
count++;
}
%>
<a href="#" class="see_more" onClick="load();">see more</a>
<%
}
%>
</div>
</div>
</body>
单击时会看到更多选项跟随功能
function load()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("yahoo");
}
}
xmlhttp.open("GET","index.jsp",true);
xmlhttp.send();
}
所以在ajax调用之后,新数据应该附加在前一个数据的末尾,即div class =“value”的末尾。我在javascript中很弱,所以我所能做的就是这个。我需要一些建议codes.Thnks提前。
如果需要,我也会发布java类代码..
public class ClassA {
public List getListValue()
{
List list = new ArrayList();
for(int i=0;i<6;i++)
{
int data= (int) (Math.random()*100);
list.add("data "+data);
}
return list;
}
}
答案 0 :(得分:1)
这个怎么样?
这样你就分开了。您为操作指定了正确的名称seeMore
,ajax功能可以重用以用于其他目的,appendDataToBody
函数也是如此。
function seeMore() {
doAjaxRequest( appendDataToElem );
}
function doAjaxRequest( callback )
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); // IE7+, Firefox, Chrome, Opera, Safari : IE6, IE5
xmlhttp.onreadystatechange=function()
{
if ( callback && xmlhttp.readyState == 4 && xmlhttp.status == 200 )
{
callback( xmlhttp.responseText );
}
}
xmlhttp.open( "GET", "index.jsp", true );
xmlhttp.send();
}
function appendDataToElem( data ) {
document.body.innerHTML += data;
}
显然
<a href="#" class="see_more" onClick="seeMore();">see more</a>
答案 1 :(得分:0)
对于其他开发人员,我使用JQuery解决了这个问题。我希望它能帮助那些有需要的人。
Index.jsp代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
<a href="#" class="see_more">see more</a>
</div>
<script>
$(document).ready(function(){
loadContent = function() {
$.ajax({
url: "getContent.jsp",
success: function(ret){$("#div2").append(ret)}
});
}
loadContent();
$('.see_more').click(function(){
loadContent();
return false;
});
});
</script>
</body>
</html>
getContent.jsp代码如下
<%
System.out.println("here in class");
ClassA class_object = new ClassA();
List list = class_object.getListValue();//gives me 6 random values
if (list != null) {
int count = 0;
for (int i = 0; i < list.size(); i++) {%>
<div class="value">
<%=list.get(i)%>
</div>
<%
count++;
}
}
%>
ClassA代码如下
import java.util.*;
public class ClassA {
public List getListValue()
{
List list = new ArrayList();
for(int i=0;i<6;i++)
{
int data= (int) (Math.random()*100);
list.add("data "+data);
}
return list;
}
}