Question

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

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

任何解决方案并希望此解决方案可以帮助其他人。谢谢！

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之后，它运行良好但是：成功函数（响应）无法正常工作。我想删除现有的$ {phList}并通过在jsp上面替换$ {phList} show来更新新的arraylist。

myJavascript.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;
            }
            }
            });
    })
});

这是arraylist中的对象模型存储。每条记录都包含对象模型数据。

model.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 （最简单）：

实施holiday/pubholiday.asp，仅使用此代替json进行响应。

<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，并通过连接字符串然后替换#container元素来自己生成html。

方法3 （推荐）：

使用一些客户端渲染库（如聚合物或把手）将json渲染为html。

Ajax在没有刷新页面的情况下替换新的arraylist

2 个答案: