[英]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.