最近刚学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进行异步调用