-1

我在使用 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 方面很弱，所以我所能做的就是做到这一点。我需要建议以及代码。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;
    }
}
4

2 回答 2

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>
于 2012-12-19T21:12:51.263 回答
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;
    }
}
于 2012-12-20T05:18:46.967 回答