【问题标题】:Updating contents of a jsp page without refreshing更新jsp页面的内容而不刷新
【发布时间】:2012-02-14 16:19:05
【问题描述】:

我有一个显示表格内容的 jsp 页面。 当用户查看页面时,表格的内容会逐秒变化。 因此,用户必须每次刷新页面才能看到新鲜和更新的内容。 如何在不刷新页面的情况下更新 jsp 页面的内容。 我想要一个功能,就像在 gmail.com 中一样,邮箱的大小只会不断增加而无需用户刷新。

【问题讨论】:

    标签: java javascript ajax jsp jakarta-ee


    【解决方案1】:

    您应该考虑使用 Ajax(jQuery 是我的首选方法)。

    http://api.jquery.com/jQuery.get/

    http://api.jquery.com/jQuery.post/

    然后,这将触发一个控制器,该控制器将返回您想要的数据而无需刷新页面。

    例如,如果您有一个 login.jsp...

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ page session="true" %>
    <html>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <head>
        <title>Login</title>
    </head>
    <body>
    <h1>
        Hello please login to this application  
    </h1>
    <script>
    
            function login(){
                var username = $("#username").val();
                var password = $("#password").val();
    
                $.post('login', { username : username , password : password }, function(data) {
                    $('#results').html(data).hide().slideDown('slow');
                } );
            }
    
    </script>
    Username : <input id="username" type="text" />
    Password : <input id="password" type="password" />
    <input name="send" type="submit" value="Click me" onclick="login()" />
    <form name="next" action="auth/details" method="get">
        <input name="send" type="submit" value="Go Through"/>
    </form>
    <div id="results" />
    </body>
    </html>
    

    在您的控制器中,您将点击模型,但为简单起见,我做了一个非常简单的示例...

    /**
     * Handles requests for the application home page.
     */
    @Controller
    public class LoginController {
    
        private static final Logger logger = LoggerFactory.getLogger(LoginController.class);
    
        Util util;
    
        /**
         * Simply selects the home view to render by returning its name.
         */
        @RequestMapping(value = "/login", method = RequestMethod.POST)
        public String home(Locale locale, Model model, String username, String password) {
    
    
            if(username.equalsIgnoreCase("david"))
            {
                model.addAttribute("validUser", "Welcome " + username );
    
                return "home";
            }
            else
            {
                model.addAttribute("validUser", "Incorrect username and password");
                return "home";
            }
    
        }
    
    }
    

    这会在 div 中添加一个缓慢滚动的 html 位,以说明它是否有效,home 的代码如下...

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ page session="true" %>
    <html>
    <body>
    <P>  ${validUser}. </P>
    </body>
    </html>
    

    【讨论】:

    • 你能提供一个jsp页面的例子吗?
    【解决方案2】:

    您可以发出 ajax 请求并从服务器中提取数据并使用 java 脚本在视图上呈现该数据

    【讨论】:

    • 你能提供一个jsp页面的例子吗
    猜你喜欢
    • 2020-07-28
    • 1970-01-01
    • 2016-06-10
    • 2016-11-17
    • 1970-01-01
    • 2011-04-08
    • 2016-08-09
    • 2015-06-18
    • 2016-02-04
    相关资源
    最近更新 更多