如何在struts2中使用struts2-jquery插件进行部分页面刷新？答案

【问题标题】：How to do partial page refresh using struts2-jquery plugin in struts2?如何在struts2中使用struts2-jquery插件进行部分页面刷新？
【发布时间】：2012-12-07 15:23:54
【问题描述】：

我想借助这个来刷新部分页面。举一个场景，我们有一个根据它的选择选项的下拉列表，我想刷新一个页面的 div 部分，并根据下拉选择填充数据。

如何做到这一点？

更新：

我试过这个：

JSP 代码：
在这个下拉选择中，我想填充（刷新）div。

<s:form id="RoleListForm">
      <s:label value="Roles"/>
      // JSON Action populating roleNameList on page Load
      <s:url id="fetchJsonRoleListUrl" action="fetchJsonRoleList"/> 
      <sj:select
         name="idRoleInfo"
         id="idRoleInfoList"
         href="%{fetchJsonRoleListUrl}"
         list="roleNameList"
         onChangeTopics="reloadRolePrivilegesDiv"
         listKey="idRoleInfo"
         listValue="roleName"
         emptyOption="true"/>
  </s:form>

这是我想根据 DD 选择填充的 div 代码，但我没有填充文本字段值：

//页面加载的JSON动作

 <s:url id="roleDetailsUrl" action="roleDetailsAction" />
 <sj:div href="%{roleDetailsUrl}" formIds="RoleListForm"  reloadTopics="reloadRolePrivilegesDiv">
    <s:textfield id="idRoleName" name="roleName" />
    <s:textfield id="idRolePrivileges" name="privileges"/>
 </sj:div>

我在浏览器上的 div 部分得到这个：

{"roleName":"IT User","privileges":"IT User"}

更新部分：

动作类：

 public class GraphsAction extends ActionSupport {

private String startDate;
private String endDate;
private String bodyStats;
HomeService homeService = new HomeService();
SimpleDateFormat formatter = new SimpleDateFormat("dd-MM-yyyy");

 public String reloadDatePicker() {
    Date date1 = new Date();
    Date date2 = new Date();
    Map session = ActionContext.getContext().getSession();
    Integer loginId = (Integer) session.get("loginId");
    if (loginId != null) {
        List list = homeService.getAllGraphData(loginId);
        List chestList = homeService.getChestGraphData(loginId);
        List waistList = homeService.getWaistGraphData(loginId);
        List hipsList = homeService.getHipsGraphData(loginId);
        List bicepsList = homeService.getBicepsGraphData(loginId);
        if (bodyStats.equals("")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("0")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("1")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
        if (bodyStats.equals("2")) {
            UserStats usetsts = (UserStats) list.get(0);
            date1 = usetsts.getUpadtedDate();
            this.startDate = formatter.format(date1);
            UserStats usetsts1 = (UserStats) list.get(list.size() - 1);
            date2 = usetsts1.getUpadtedDate();
            this.endDate = formatter.format(date2);
        }
         return SUCCESS;
}

public String getEndDate() {
    return endDate;
}

public void setEndDate(String endDate) {
    this.endDate = endDate;
}

public String getStartDate() {
    return startDate;
}

public void setStartDate(String startDate) {
    this.startDate = startDate;
}
  public String getBodyStats() {
    return bodyStats;
}

public void setBodyStats(String bodyStats) {
    this.bodyStats = bodyStats;
}

}

Struts.xml：

<action name="jsonReloadDatePickerAction"  class="com.ebhasin.fitnessbliss.actions.GraphsAction" method="reloadDatePicker">
     <result  name="success">/jsps/datePicker.jsp</result>
 </action>

【问题讨论】：

你知道你需要struts2-json-plugin，你有没有返回json的动作？你有没有用java脚本调用它来获取数据？您是否尝试过使用 jquery 将数据写入 div，可能使用带有适当回调的 jQuery.getJSON()？
@Quaterninon 我更新了我的问题，请检查我在做什么
@user1703710，您的问题分为两部分，1）服务器端生成 json 并将其返回给浏览器。 2）在浏览器上呈现该json。使用这些 sj: 标签的问题是它们混淆了问题。它们适用于客户端，但要求受众了解服务器端技术，从而大大减少了您的受众，此外，即使对于 struts2 用户，这些标签也是高度可选的。
如果#1 工作正常，然后问这样的问题：“这是一个 json 块（显示 json 块）。这是我用来获取和呈现此页面的 jQuery（显示js/html)。为什么这不起作用？（用 jquery 和 json 标记）“我敢打赌你会很快得到答案，这里有很多 jQuery 忍者。
该插件确实受到了很多人的欢迎，因为它通过这些标签混淆了 JS。 jQuery 通常不使用标签编写，所以为什么要尝试？

标签： jquery json struts2 struts2-jquery struts2-json-plugin

【解决方案1】：

其中一个选项是将当前位于您的 <sj:div> 中的内容放到单独的 JSP 页面中，并配置您的 roleDetailsAction 操作以返回该页面而不是 json 结果。

【讨论】：

我之前也做过同样的事情，它对我来说工作正常，但问题是重新加载该 jsp 需要时间。不知道为什么？
你的意思是显示div的内容需要很长时间吗？你在行动中做什么？
对，显示时间太长了，我用 struts.xml 更新了上面的操作。

【解决方案2】：

我几乎所有的软件解决方案都必须这样做...！！这就是我的工作

a) 使用来自服务器的所有必要数据加载页面，并在 HTML 源代码中将下拉按钮的 onchange 事件与 JS 中的函数链接。

b) 使用从服务器获得的数据填充/初始化页面。

c) 由于我们已将下拉按钮的 onchange 事件与我们在 JS 中的实现联系起来，我们所要做的就是从这些函数（在 JS 中）进行 AJAX 调用并从服务器获取所需的数据。再次在当前 AJAX 请求完成的响应中，我们从服务器获取相关数据，然后我们使用 DOM 操作来使用所需数据更新页面。

我们必须坚持页面的所有元素/div 的 id 并用 jQuery 摆弄它们。

一切顺利。

PS：如果您需要相同的参考代码，请联系我...！！

【讨论】：