json 调用 Google 图片搜索
/*****************************************/
使用Google Ajax API 来实现图片的搜索功能:在实现的过程中要用到的技术有:Jquery,json 等技术
/*************************************************************/
jsp页面:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
//当单击提交按钮的时候,进行异步请求查询数据
$("#bt").click(function(){
//进行post方法来异步请求
$.get("JsonServlet",
{imageName:encodeURI($("#imageName").val(),"utf-8"),imageSource:$("input[name=iamgeSource]:checked").val()},
function(returnedData,status){
$("#showPic").empty();
var html="";
for(var i=0;i<returnedData.length;i++){
html +="<img src='"+returnedData[i]+"' width='150' height='150'/>";
}
$("#showPic").append(html);
}
);
});
$("#save").click(function(){
$("#pro").html("<font color='red'>processing....</font>");
$.post("SaveImageServlet",null,function(returnedData,result){
alert(returnedData);
});
});
});
</script>
</head>
<body>
<input type="text" id="imageName" />
<input type="radio" name="iamgeSource" value="google" checked="checked" />google
<input type="radio" name="iamgeSource" value="flickr"/>flickr
<br/>
<input type="button" id="bt" value="提交"/>
<input type="button" id="save" value="保存"/>
<div id="pro"></div>
<div id="showPic"></div>
/*****
*使用dopost来接受参数,并返回图片路径
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String imageName=URLDecoder.decode(request.getParameter("imageName"),"utf-8");
String imageSource=request.getParameter("imageSource");
HttpSession session=request.getSession();
try {
//存储向客户端发送的url
List<String> returnList=new ArrayList<String>();
session.setAttribute("iamgeName", imageName);
session.setAttribute("picSource", imageSource);
session.setAttribute("images",returnList);
//判断用户使用的是什么搜索
if("google".equals(imageSource)){
//存储每次从Google货到的json数据
List<String> lists=new ArrayList<String&