如何使用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的循環中的數據

回答

相關問題