-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 に答える