Fatal编程技术网

Javascript Ajax没有'；附加

javascript ajax jsp

Javascript Ajax没有'；附加,javascript,ajax,jsp,Javascript,Ajax,Jsp,我在使用ajax创建“查看更多”选项时遇到问题 <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 v

我在使用ajax创建“查看更多”选项时遇到问题

    <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>

<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>

<%

    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++;
                    }
    }


%>

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;
    }
}
因此，在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;
    }
}

公共类ClassA{
公共列表getListValue（）
{
列表=新的ArrayList（）；
对于（inti=0；i这个呢

通过这种方式，你可以将事情分开。你给动作起了一个合适的名字
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>



对于其他开发人员，我使用JQuery解决了这个问题。我希望它能帮助那些需要帮助的人

jsp代码如下


    <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>



<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>



<%

    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++;
                    }
    }


%>



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;
    }
}




JSP页面
$（文档）.ready（函数（）{
loadContent=函数（）{
$.ajax({
url:“getContent.jsp”，
成功：函数（ret）{$（“#div2”）.append（ret）}
});   
}
loadContent（）；
$（'.请参阅更多'）。单击（函数（）{
loadContent（）；
返回false；
});
});


jsp代码如下


    <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>



<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>



<%

    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++;
                    }
    }


%>



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;
    }
}






ClassA代码如下所示


    <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>



<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>



<%

    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++;
                    }
    }


%>



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;
    }
}



import java.util.*；
甲级公共课{
公共列表getListValue（）
{
列表=新的ArrayList（）；

对于（int i=0；iSo，您如何知道它不起作用？可能结果与原始内容完全相同。此外，我不确定是否应将
setRequestHeader
放在
open（）之前
。您至少应该在控制台中查找错误。您好..ajax工作正常，但我不知道如何在以前的内容下添加新内容。我是javascript初学者，因此我需要代码方面的帮助。+1用于在本机JS中尝试ajax，而不是使用jQuery，但是-1用于编写JAVA代码di直接在JSP文件中…所以+-0
^ ^
如果我们不知道从ajax调用中得到的是什么，我们如何告诉您如何追加内容？ajax函数调用相同的index.JSP页面。我已经发布了相同页面的代码。如果您需要java类代码，我也会上载。如果您有进一步的问题，请问我。我需要很快解决它。它没有向div追加新的6个未定义的值。我没有对此进行测试，但出于调试目的，在
if
函数中编写
console.dir（xmlhttp）
，以查看ajax调用返回的内容