如何使用AJAX发送和接收来自servlet的循环中的数据

我正在研究新闻摘要器，它的一个要求是在使用从数据库调用的AJAX的网页上动态显示文章标题列表。我已经能够成功配置数据存储（谷歌应用程序引擎）并使用AJAX调用来显示文章标题。但是，这里有一个大问题。我只能打电话并显示一个标题。我想在循环中运行AJAX调用，以便可以使用循环的变量i作为唯一引用来显示10个存储在数据存储中的新闻文章，从1到10。如何使用AJAX发送和接收来自servlet的循环中的数据

Ajax代码：

  function change(element) { 
      var xmlhttp; 
      var i = 1; 
      var param = "category=" + element + "&no=" + i; // This i is the key to my operation. 
      alert(param); //testing purpose 
      xmlhttp = new XMLHttpRequest(); 
      xmlhttp.onreadystatechange = function() { 
       //alert('function()'); 
       if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
        var div = document.getElementById('content'); 
        div.innerHTML = ''; 
        for (i = 1; i <=10; i++) { 

         var a = document.createElement('a'); 
         a.href = "#"; 
         a.onclick = rem.bind(null, i); 
         a.innerHTML = '<h2 id="theading'+i+'">' 
           + xmlhttp.responseText + '</h2>'; //the title will go here. 

         div.appendChild(a); 
         div.appendChild(document.createElement('br')); 
        } 
       } 

      } 

      xmlhttp.open("POST", "/display?" + param, true); 
      xmlhttp.send(); 
}

我还要求提出的JavaScript代码，而不是jQuery的，因为我不熟悉它。这些是我卑微的开始。

UPDATE

我的servlet代码：

public class ArticleHandler extends HttpServlet { 
     public void service(HttpServletRequest req, HttpServletResponse resp) 
       throws IOException { 
      resp.setContentType("text/html"); 

      PrintWriter out = resp.getWriter(); 

      String category=req.getParameter("category"); 
      String number=req.getParameter("no"); 
      int i = Integer.parseInt(number);  
      List<EntityArticles> articles = RegisterClass.ofy().load().type(EntityArticles.class).filter("category ",category).list(); 

      out.write(articles); // Is this the correct way to send this list articles ? 


     } 
    }

这是发送列表中选择正确的方式？

来源

2014-07-24 Anjul Garg

是否有理由做10个Ajax调用，而不是在一次调用中获得全部10篇文章？ – anon

是的。其实我对AJAX和Javascript很陌生。我不知道如何在一次调用中获得10篇文章，然后将它们设置为HTML。任何帮助，将不胜感激。 –

返回来自服务器的文章标题列表，而不是仅返回一篇文章的标题 – anon

在responseText中的10篇文章中，您可以将服务器代码中的html呈现给responseText（服务器代码中的循环）。然后在阿贾克斯成功拨打

  var div = document.getElementById('content'); 
      div.innerHTML = xmlhttp.responseText;

来源

2014-07-24 14:52:49

其实我对AJAX和Javascript很新。我不知道如何在一次调用中获得10篇文章，然后将它们设置为HTML。任何帮助，将不胜感激。 –

这是一个很好的建议。我会尝试。 –

它工作完美。虽然在out.write中编写html代码有点困难。但它是值得的。 –

我已经创建了一个fiddel供您理解检查它。 Ajax Example in fiddle

您是否正在发送邮寄请求或获取请求？我问这是因为我看到方法为“POST”，并将参数作为“GET”作为URL传入。请在您的代码中更正该部分。

loadXMLDoc=function() 
{ 
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) 
    { 
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","/ahmadfaizalbh/LaH8F/show/",true); 
xmlhttp.send(); 
}

来源

2014-07-24 15:26:35

最好的选择是一次调用ajax并获得10个项目。

但是，如果你没有选择，你可以修改的功能一点：

function change(element, i){ 
    var xmlhttp; 
    //var i=1; 
    var param = "category=" + element + "&no=" + i; 
    ... 
}

调用函数这种方式（10倍，因为你需要）：

for(i=1;int <= 10; i++){ 
    change(element, i); 
}

UPDATE 要使一次ajax呼叫，你可以做：

var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function(){ 
    //append html node 
    //the object is xmlhttp.responseText. The loop will depend if this is json, html objects, string, etc 
} 
xmlhttp.open("POST", "/display?" + param, true); 
xmlhttp.send();

要获得10个结果，您需要（必须）修改服务器端脚本或servlet。如果您无法修改servlet，则无法在单个Ajax调用中获得10个项目。

来源

2014-07-24 15:28:26 rogelio

感谢您的及时回复。我很乐意提供建议。我如何使用AJAX一次调用10个项目，然后用html显示它们？ –

如果您需要10个项目，您需要在servlet中执行此操作。然后进行一次ajax调用并遍历结果。查看我的更新。 – rogelio

嘿，我用我的服务器端代码更新了我的帖子。请查看并协助。 –

如何使用AJAX发送和接收来自servlet的循环中的数据

回答

相关问题