xueyugudao
xueyugudao
采纳率25%
2018-05-19 14:20 阅读 1.4k
已采纳

web中servlet有关,关于servlet只修改页面一部分的显示

10

最近刚学servlet,在eclipse里做的。servlet的doPost(),doGet()方法也学了,表单,数据库也做了。
有个问题,servlet每次用doPost(),doGet(),处理时,去往浏览器里println(),都是重新开一个新的页面,感觉很麻烦。那种点击一个按钮仅仅修改原本页面的一小块部分怎么做到。或者用其他的技术能实现吗,比如JSP,啥的。
还想问问servlet去println图片好麻烦,有啥好方法,或者换种技术

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

6条回答 默认 最新

  • 已采纳
    caozhy 从今以后生命中的每一秒都属于我爱的人 2018-05-19 14:27

    你说的不请求整个页面更新界面上一小块的技术叫做 ajax
    它实现的原理是,当你点一个链接或者按钮,这个链接不是指向一个地址,或者按钮不是直接提交,而是执行一段javascript
    这段js会创建一个Http对象(不同的浏览器,这个对象略有不同)
    用这个Http对象去访问你的服务器获取/提交数据(对于你的服务器来说,还是doPost和doGet接收),这里是Http对象,而不是浏览器,这是关键
    当得到了服务器返回的数据后,js脚本再用 getElementById()方法找到页面上的一个div或者元素标记,并且修改InnerHtml属性,将返回的数据设置上去,完成刷新。
    这样没有请求页面,浏览器上的内容就变了。

    当然,上面说的是原理,具体到实践,不需要那么麻烦,用jQuery,这些全部都封装好了。

    点赞 5 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2018-05-19 14:31

    https://blog.csdn.net/u012843873/article/details/52817788 这个例子

     <span style="font-size:14px;"><span style="color:#ff0000;">index.jsp页面代码</span>  
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
    <html>    
      <head>    
         <title>My JSP 'index.jsp' starting page</title>    
        <script type="text/javascript" language="javascript" src="js/jquery-1.6.js"></script>    
    <script type="text/javascript">    
      function CheckAjax ()    
      {    
     if($('#username').val().length==0){      
                       $('.hint').text("用户名不能位空").css({"background-color":"green"});       
                   }      
                   else{      
                        alert($('#username').val());    
        $.ajax({    
                type: "get",//使用post方法访问后台    
                dataType: "json",//返回json格式的数据    
                url: "Output.jsp",//要访问的后台地址    
                contentType: "application/json;charset=utf-8",    
                data: {username:$('#username').val()},//要发送的数据    
                beforeSend: function() {    
                $("span").html("<font color='red'>ajax数据处理中,请稍后...</font>");},    
    
               complete :function(){$("span").html("<font color='red'>ajax数据处理完毕</font>");},//AJAX请求完成时    
                success: function(data){//data为返回的数据,在这里做数据绑定    
                     //jsonArray数组 用each遍历    
                        $.each(data.jsonArray,function(index){      
                         $.each(data.jsonArray[index],function(key,value){      
                                    alert(key+":"+value)     
                                     $('body').append("<div>"+key+"---"+value+"</div>").css("color","red");       
                                           });      
                            });      
    
                        //单个字符串输出      
                        $('body').append("<div>"+data.account+"</div>").css("color","red");      
                    },    
                 error: function(XMLResponse) {alert(XMLResponse.responseText)}    
                    });    
    
                    }    
      }    
    </script>    
      </head>    
    
      <body>    
         <table><tr><td>    
         <input type="text" id="username" name="username" title="username" onblur="CheckAjax();" >    
         </td></tr>    
         <tr><td>    
           <div class="hint">   </div>     
         </td></tr>    
    
         <tr><td>    
         <span></span>    
         </td></tr>    
         </table>    
      </body>    
    </html>  </span>  
    

    $.ajax 这个封装的就是创建Http对象

    type: "get",//使用post方法访问后台

    dataType: "json",//返回json格式的数据

    url: "Output.jsp",//要访问的后台地址

    假设你的服务器上 Output.jsp 或者你也可以用servlet的doGet,这个请求就发到你那里。你返回json(当然你也可以返回html,你修改dataType即可)

    success: function(data) 这里的data就是返回的数据

     $('body').append("<div>"+data.account+"</div>").css("color","red");  
    

    将服务器返回的数据添加到网页的body节点下。

    点赞 1 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 2018-05-19 14:36

    ervlet去println麻烦,所以有了jsp页面,你可以把要输出的内容镶嵌在html里
    当然更进一步,你还可以用mvc框架(比如struts或者spring mvc)等等。

    点赞 1 评论 复制链接分享
  • zqbnqsdsmd zqbnqsdsmd 2018-05-19 14:49

    你的问题用ajax+servlet可以实现

    参考:https://blog.csdn.net/szliszt/article/details/1677716

    点赞 评论 复制链接分享
  • zqbnqsdsmd zqbnqsdsmd 2018-05-19 14:50
    点赞 评论 复制链接分享
  • zjx2016 zhaojiaxing0216 2018-05-20 03:14

    可以使用ajax进行异步调用

    点赞 评论 复制链接分享

相关推荐