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

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

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

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

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节点下。

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

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

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

https://www.cnblogs.com/iOS-mt/p/5649467.html

可以使用ajax进行异步调用