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

Posted 2023-03-05

【中文标题】更改部分 html 页面而不刷新整个页面

【英文标题】：Changing part of the html page without refreshing whole page

【发布时间】：2014-06-24 12:20:45

【问题描述】：

我有一个 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());
    

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

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

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

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

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

【问题讨论】：

查看 jQuery 的 AJAX 函数，特别是 load() 函数。 api.jquery.com/load

我一直在尝试理解和使用 Ajax，但我能学到的只是如何从 .t​​xt、.xml 或 .html 文件中加载数据。但是对于我的具体示例，我仍然不知道如何从服务器获取数据

您将设置一个单独的文件，从服务器检索数据，然后使用 AJAX 加载该文件。这可能会有所帮助 - learn.jquery.com/ajax

尝试将该部分放入更新面板

如果您需要 AJAX 以外的其他方式，请查看 JSF（Java Server Faces 2.0），它在某些组件内部使用 ajax。这样你就不需要使用 ajax 并且仍然可以完成你的工作。

【参考方案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" /> </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 的结果必须是表格或段落的文本

【讨论】：

您也可以将两个javascript函数合二为一，并通过调用它的按钮通过参数发送页面url

谢谢，这需要一些技巧，但这是一个很好的例子，我理解并帮助我完成了我的工作。

【参考方案2】：

客户端实现

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

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

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

关注点分离

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

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

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