如何使用 AJAX 在循环中向 servlet 发送和接收数据

Question

我正在开发一个新闻摘要器，它的一个要求是使用从数据库调用的 AJAX 在网页上动态显示文章标题列表。我已经能够成功配置数据存储（谷歌应用引擎）并使用 AJAX 调用来显示文章标题。但是，这里有一个大问题。我只能调用并显示一个标题。我想在一个循环中运行 AJAX 调用，这样我就可以使用循环的变量 i 作为唯一引用来显示存储在数据存储区中的 10 条新闻文章，从 1 到 10。

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，因为我不熟悉它。这些是我卑微的开始。

更新

我的 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 ?


        }
    }

这是发送列表的正确方式吗？

Answer 1

responseText中的10篇文章，可以将服务器代码中的html渲染到responseText（服务器代码中的循环）。然后在 ajax 成功中调用

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

Answer 2

我创建了一个 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();
}

Answer 3

最好的选择是调用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);
}

更新 要进行一次 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 个项目。