客户端实现

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>

爪哇：

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应该＆＃34;选择要处理的模板片段（一旦读取和解析），丢弃模板的其余部分＆＃34;但我无法找到更多关于它的信息，如何使用它或者它是我正在寻找的。

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>

执行ajax部分的viewText1.jsp页面

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

执行ajax部分的viewText2.jsp页面

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

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

Answer 2

客户端实现

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

考虑将您的前端设计为SPA。查看AngularJS或Knockout。
此外，如果这只是您应用程序的一小部分，您可以使用jQuery AJAX之类的方法来使用老派方法。

关注点分离

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

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

如果您有任何问题，我很乐意更新此答案。

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

2 个答案:

客户端实现

关注点分离