[英]How to post and receive data in a loop using AJAX to and from a servlet
我正在研究一个新闻摘要器,它的要求之一是使用从数据库调用的AJAX在网页上动态显示文章标题列表。 我已经能够成功配置数据存储区(Google App引擎)并使用AJAX调用来显示文章标题。 但是,这里有一个大问题。 我只能呼叫并显示一个标题。 我想在循环中运行AJAX调用,以便可以使用循环的变量i作为唯一引用来显示从1到10的数据存储中存储的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,因为我不熟悉它。 这些是我卑微的起点。
UPDATE
我的服务码:
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 ?
}
}
这是发送列表的正确方法吗?
在responseText中有10篇文章,您可以将服务器代码中的html呈现为responseText(服务器代码中的循环)。 然后在ajax成功中,您致电
var div = document.getElementById('content');
div.innerHTML = xmlhttp.responseText;
我创建了一个供您理解的字段。 小提琴中的Ajax示例
您是在进行发布请求还是获得请求? 我之所以这样问,是因为我看到方法为“ POST”,而参数则通过将其放在url中作为“ GET”传递。 请也在您的代码中更正该部分。
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();
}
最好的选择是一次调用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个项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.