Ajax 替换新的数组列表而不刷新页面

Question

我是新的ajax，我怎样才能用新的arraylist替换${phList}，以便ajax可以帮助我更新内容而无需刷新整个页面。

ajax 将触发控制器检索数据并存储在 arraylist 中，然后将 arraylist 传递给 ajax。Ajax 将更新 jsp 中的内容。下一步 forEach 循环将生成带有值的列和复选框(如果有从数据库中检索记录)。

任何解决方案，希望这个解决方案可以帮助其他人。谢谢！

myJsp.jsp

<select id="selected_year" name="selected_year" class="form-control">
<c:forEach var="line" items="${yearlist}">
<c:choose>
<c:when test="${refreshInd ge 0 and line eq refreshInd}">
<option selected="selected"><c:out value="${line}" />
</option>
</c:when>
<c:otherwise>
<option><c:out value="${line}" /></option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
<c:forEach var="ph" items="${phList}" varStatus="PHstatus">
<div class="row">
<div class="col-md-4">
<form:input path="phList[${PHstatus.index}].holidayDesc" class="form-control col-md-5" value="${ph.holidayDesc}" />
</div>
<div class="col-md-3">
<form:input path="phList[${PHstatus.index}].startDate" class="form-control" value="${ph.startDate}" id="calendar1" placeholder="dd/mm/yyyy" onkeypress="return noAlphabet(event)" />
</div>
<div class="col-md-3">
<form:input path="phList[${PHstatus.index}].endDate" class="form-control" value="${ph.endDate}" id="calendar2" placeholder="dd/mm/yyyy" onkeypress="return noAlphabet(event)" />
</div>
<div class="col-md-2">
<form:checkbox path="phList[${PHstatus.index}].checkboxDel" value="" class="cbposition" />
</div>
</div>
<br>
</c:forEach>

在我更改selected_year以触发 ajax 后，它运行良好，但 ：success 函数(响应)无法正常工作。我想删除现有的 ${phList} 并通过替换上面的 jsp 显示的 ${phList} 来更新新的 arraylist。

我的Javascript.js

$(function($) {
$("#selected_year").change(function(){
var selectedText = $(this).find("option:selected").text();
var $form = $(this);
var action = $form.find('.send').val();
var list[];
var array[];
$.ajax("holiday/pubholiday.json?" , {
method: "GET",
accepts: "application/json",
dataType: "json",
data: $form.serialize() + '&selectedText=' + selectedText,
success: function(response) {
$("#phList").remove()
$(JSON.stringify(response))
//how to pass the response which is my new arraylist to replace the ${phList}
},
}).done(function(data) {
console.log(data)
alert("Data Sent" + selectedText)
})
.fail(function(jqXHR, textStatus, errorThrown) {
var errorMessage = "";
if (jqXHR.status == 401) {
errorMessage = "Your session has expired. Please <a href="<spring:url value='/login'/>">login</a> again.";
}else if(jqXHR.status == 500){
console.log(jqXHR.status);
console.log(jqXHR.responseText);
console.log(thrownError);
}else {
try {
var errorJson = JSON.parse(jqXHR.responseText);
errorMessage = errorJson.error;
} catch (e) {
errorMessage = errorThrown || textStatus;
}
}
});
})
});

这是数组列表中的对象模型存储。每条记录将包含对象模型数据。

型号.java

public class PubHoliday {
private int year;
private String holidayID;
private String holidayDesc;
private String startDate;
private String endDate;
private boolean checkboxDel;
private String selected_year;
private int refreshInd;
public int getYear() {
return year;
}
public void setYear(int year) {
this.year = year;
}
public String getHolidayID() {
return holidayID;
}
public void setHolidayID(String holidayID) {
this.holidayID = holidayID;
}
public String getHolidayDesc() {
return holidayDesc;
}
public void setHolidayDesc(String holidayDesc) {
this.holidayDesc = holidayDesc;
}
public String getStartDate() {
return startDate;
}
public String getEndDate() {
return endDate;
}
public void setStartDate(String startDate) {
this.startDate = startDate;
}
public void setEndDate(String endDate) {
this.endDate = endDate;
}
public boolean getCheckboxDel() {
return checkboxDel;
}
public void setCheckboxDel(boolean checkboxDel) {
this.checkboxDel = checkboxDel;
}
public String getSelected_year() {
return selected_year;
}
public void setSelected_year(String selected_year) {
this.selected_year = selected_year;
}
public int getRefreshInd() {
return refreshInd;
}
public void setRefreshInd(int refreshInd) {
this.refreshInd = refreshInd;
}
}

Answer 1

首先，你需要用 id 包装div 的<c:forEach var="ph" items="${phList}" varStatus="PHstatus">，例如：

<div id="list_holidays">
<c:forEach var="ph" items="${phList}" varStatus="PHstatus">
.......
</c:forEach>
</div>

然后在成功中 ajax 代码 - 空div#list_holidays - 获取结果，每一行，创建新的div，附加到div#list_holidays

success: function(response) {
var wrapper = $('#list_holidays');
wrapper.html('');
//->foreach response result
//   -> $('div').html(your template).appendTo(wrapper)
}

Answer 2

JSP是服务器端渲染。 这意味着，当收到请求时，服务器使用变量${phList}来呈现动态HTML页面并将该页面发送到浏览器。Ajax是由你的JavaScript在浏览器中发出的请求。因此，浏览器无法直接知道或更改变量$(phList}并影响模板。

但是，你说的可以实现。通过以下方式之一

方法 1 (最简单的)：

实现仅用 this 而不是 json 响应的holiday/pubholiday.asp。

<c:forEach var="ph" items="${phList}" varStatus="PHstatus">
<div class="row">
<div class="col-md-4">
<form:input path="phList[${PHstatus.index}].holidayDesc" class="form-control col-md-5" value="${ph.holidayDesc}" />
</div>
...
<br>
</c:forEach>

将容器元素添加到数组项中，如下所示

<div id="container" >
<c:forEach var="ph" items="${phList}" varStatus="PHstatus">
...
</c:forEach>
</div>

将主页中的 ajax 请求更改为此请求。当您收到来自pubholiday.jsp的响应时，将#container的内容替换为从 ajax 接收的内容。

...
$.ajax("holiday/pubholiday.asp?" , {
method: "GET",
accepts: "application/html",
dataType: "json",
data: $form.serialize() + '&selectedText=' + selectedText,
success: function(response) {
// This is where magic happens
$("#container").html(response);   
},
}).done(function(data) {
console.log(data)
alert("Data Sent" + selectedText)
})
...

方法2：

如果你需要的响应只有json，success callback读取json，并通过连接字符串自己生成html，然后替换#container元素。

方法 3(推荐)：

使用一些客户端渲染库(如聚合物或车把)将 json 渲染为 html。