java - 在不刷新整个页面的情况下更改 html 页面的一部分

Question

我有一个 html 页面和一个带有 Thymeleaf 模板引擎的 java 应用程序，我正在寻找一个教程来向服务器发出请求并根据响应仅呈现页面的一部分。

此刻，我有一些按钮具有相同页面的链接和不同的参数，我的 div 是基于属性 articleList 创建的(我根据 button_id 从服务器接收)

HTML:

<a href="/index?button_id=1"> button 1 </a>
<a href="/index?button_id=2"> button 2 </a>

<div class="" th:each="article : ${articleList}">
    <p th:text="${article.getText()}">Article</p>

Java:

public class NodController implements IGTVGController {
  public void process(
        final HttpServletRequest request, final HttpServletResponse response,
        final ServletContext servletContext, final TemplateEngine templateEngine) 
        throws Exception {

    final WebContext ctx = new WebContext(request, response, servletContext, request.getLocale());

    Integer button_id = Integer.valueOf(request.getParameter("button_id"));
    List<String> articleList = getArticleList(button_id);
    request.getSession().setAttribute("articleList",articleList);

    templateEngine.process("/index", ctx, response.getWriter());
    }

我希望我的按钮能够处理我的索引 Controller 并且只更改带有文章的 div 而不是刷新整个页面。

我尝试过使用 ajax，但没有找到我可以理解的服务器端代码示例，所以我不知道如何处理请求，也不知道如何使用 servlet。我也没有设法向我当前的 Controller 发送任何请求。

我也在thymeleaf api中找到了这个方法:

public final void process(String templateName, IContext context,
                      IFragmentSpec fragmentSpec, Writer writer)

IFragmentSpec 应该“选择要处理的模板片段(一旦读取和解析)，丢弃模板的其余部分”，但我找不到关于它的更多信息，如如何使用它或它是什么我在找。

Answer 1

这是javascript代码

//get text 1 by ajax
    function getText1(urlstarted) {
        xmlHttp = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                // set type accordingly to anticipated content type
                //http_request.overrideMimeType('text/xml');
                xmlHttp.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!xmlHttp) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        var url=urlstarted+"/jsp/viewText1.jsp"; //put the link to ur Ajax page here
         xmlHttp.onreadystatechange = startAjaxingText;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function startAjaxingText() {
        if (xmlHttp.readyState != 4) {

            document.getElementById('image').style.display='block' ;
            document.getElementById('result').style.display='none' ;
        }

        if (xmlHttp.readyState == 4) {

            if (xmlHttp.status == 200) {




                    document.getElementById('image').style.display='none' ;
                    document.getElementById('result').style.display='block';
                    document.getElementById('result').innerHTML = xmlHttp.responseText;


            } else {
                alert("There was a problem with the request.");
            }
        }

    }
//get text 2 by ajax
    function getText2(urlstarted) {
        xmlHttp = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xmlHttp = new XMLHttpRequest();
            if (xmlHttp.overrideMimeType) {
                // set type accordingly to anticipated content type
                //http_request.overrideMimeType('text/xml');
                xmlHttp.overrideMimeType('text/html');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        if (!xmlHttp) {
            alert('Cannot create XMLHTTP instance');
            return false;
        }

        var url=urlstarted+"/jsp/viewText2.jsp"; //put the link to ur Ajax page here
         xmlHttp.onreadystatechange = startAjaxingText2;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function startAjaxingText2() {
        if (xmlHttp.readyState != 4) {

            document.getElementById('image').style.display='block' ;
            document.getElementById('result').style.display='none' ;
        }

        if (xmlHttp.readyState == 4) {

            if (xmlHttp.status == 200) {




                    document.getElementById('image').style.display='none' ;
                    document.getElementById('result').style.display='block';
                    document.getElementById('result').innerHTML = xmlHttp.responseText;


            } else {
                alert("There was a problem with the request.");
            }
        }

    }

---

现在你的按钮看起来像这样

    <input name="button_1" id="button_1" type="button" value="button_1" onclick="getText1('<%=request.getContextPath()%>');" />
     <input name="button_2" id="button_2" type="button" value="button_2" 
onclick="getText2('<%=request.getContextPath()%>');" />

你的 div 看起来像

<div id="image" style="display:none"><img src="<%= request.getContextPath()%>/images/ajax-loader.gif" alt="Loading...."/> </div>
                <div id="result" style="display:none"></div></td>

您的 viewText1.jsp 页面执行 ajax 部分

out.println("text1");//or any logic u want 

您的 viewText2.jsp 页面执行 ajax 部分

 out.println("text2");//or any logic u want 

请注意:viewText1.jsp 或 viewText2.jsp 的结果必须是文本，表格或段落