日期:2014-05-16  浏览次数:20352 次

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&