Ajax 请求重新加载孔 body 而不是指定的元素

Question

我的 AJAX-request 的响应提供了整个 body，因此每个 element/script 都会重新加载。我不知道为什么。唯一需要重新加载的部分是 content。
我正在使用 JSF2.3 和 Wildfly17。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
>

<h:head>

</h:head>

<h:body>
        <h:form>
            <f:ajax render="content">
            <h:commandLink value="#{msg['menu.1']}" action="#{page1.getLink()}"/>
            <h:commandLink value="#{msg['menu.2']}" action="#{page2.getLink()}"/>
            <h:commandLink value="#{msg['menu.3']}" action="#{page3.getLink()}"/>
            </f:ajax>
            <h:commandLink value="#{msg['menu.logout']}" action="#{homeBean.logOut()}"/>
        </h:form>



            <ui:insert id="content" name="content" >
                <!--<ui:include src="/template/common/commonContent.xhtml" />-->
            </ui:insert>



</h:body>
</html>

编辑：它看起来像这样：

编辑 2：
按下其中一个命令后的响应Links

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="javax.faces.ViewRoot"><![CDATA[<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><script type="text/javascript" src="/bwa/javax.faces.resource/jsf.js.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819?ln=javax.faces"></script></head><body onload="startTime()">
<form id="j_idt4" name="j_idt4" method="post" action="/bwa/user/textSearch.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt4" value="j_idt4" />
<a id="j_idt4:j_idt5" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Home</a><a id="j_idt4:j_idt6" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Quellcode durchsuchen</a><a id="j_idt4:j_idt7" href="#" onclick="mojarra.ab(this,event,'action',0,'content');return false">Top1500</a><a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt4'),{'j_idt4:j_idt8':'j_idt4:j_idt8'},'');return false">Ausloggen</a>
</form>

    <h2>Suche in Quellcode</h2>
    <br />
<form id="j_idt10" name="j_idt10" method="post" action="/bwa/user/textSearch.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt10" value="j_idt10" />

    <table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" name="j_idt10:j_idt12" />
        </td>
        <td><input type="submit" name="j_idt10:j_idt14" value="Suchen" />

        </td>
    </tr>
</table>
</form></body>
</html>]]></update><update id="j_id1:javax.faces.ViewState:0"><![CDATA[2371578821549273726:500402066268747694]]></update></changes></partial-response>

Request-header:

Host: localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:69.0) Gecko/20100101 Firefox/69.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Faces-Request: partial/ajax
Content-type: application/x-www-form-urlencoded;charset=UTF-8
Content-Length: 304
Connection: keep-alive
Referer: http://localhost:8080/bwa/login.xhtml;jsessionid=2o_BGXk3sRokUbdd2ta2TO_Sl2u-pPduIiijrwtW.pcwer1819

Request-body

j_idt4=j_idt4&javax.faces.ViewState=2371578821549273726%3A500402066268747694&javax.faces.source=j_idt4%3Aj_idt6&javax.faces.partial.event=click&javax.faces.partial.execute=j_idt4%3Aj_idt6%20j_idt4%3Aj_idt6&javax.faces.partial.render=content&javax.faces.behavior.event=action&javax.faces.partial.ajax=true

Answer 1

问题是 commandLinks 的操作返回了一个值，这用 ajax 覆盖了预期的行为。解决方案是使用 url:

设置页面变量

<h:form>
            <f:ajax render="content">
            <h:commandLink value="#{msg['menu.1']}" action="#{sessionData.setPage('/user/1.xhtml')}"/>
            <h:commandLink value="#{msg['menu.2']}" action="#{sessionData.setPage('/user/2.xhtml')}"/>
            <h:commandLink value="#{msg['menu.3']}" action="#{sessionData.setPage('/user/3.xhtml')}"/>
            </f:ajax>
            <h:commandLink value="#{msg['menu.logout']}" action="#{homeBean.logOut()}"/>
</h:form>

稍后使用此变量加载页面：

<h:panelGroup layout="block" id="content">
        <ui:include src="#{sessionData.page}" />
</h:panelGroup>

我还用 <h:panelGroup layout="block"> 替换了我的 <div> 因为 JSF 无法找到它并且没有呈现更改。

另见

How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
Is it possible to update non-JSF components (plain HTML) with JSF ajax?

Ajax 请求重新加载孔 body 而不是指定的元素

Ajax Request reloads hole body and not the specified element

ajax

jsf

jsf-2