更改html页面的一部分而不刷新整个页面

Question

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

此时，我有一些按钮具有相同页面的链接，带有不同的参数，我的div是基于属性文章列表创建的（我从服务器接收基于button_id）

超文本标记语言：

<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());
    }

我希望我的按钮处理我的索引控制器，只更改文章的div，而不是刷新整个页面。

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

我还在thymeleaf api中发现了这种方法：

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

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

Answer 1

您必须使用AJAX从服务器动态加载内容。

>

考虑将您的前端设计为SPA。查看AngularJS或Knockout。

此外，如果这只是应用程序的一小部分，则可以使用类似jQuery AJAX的老式方法。

我强烈建议考虑通过使用服务器作为REST服务和前端作为客户端来分离关注点。如果您想保持大型应用程序的可维护性和可扩展性，这是最佳做法。

您应该寻找如何使用服务器端技术实现REST的教程。这是很常见的做法，所以我认为你应该能够找到一个。

如果你有任何问题，我很乐意更新这个答案。

Answer 2

这是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 

您的视图文本2。做ajax部分的jsp页面

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

注意：viewText1的结果。jsp或viewText2。jsp必须是文本，可以是表，也可以是段落