1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4 <html>
  5 <head>
  6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7 <title>百度一下模仿</title>
  8 <style type="text/css">
  9 html,body{
 10     width: 100%;/*默认值是0*/
 11     height: 100%;/*默认值是0*/
 12     margin: 0px;
 13     padding: 0px;
 14 }
 15 #mybody{
 16     width:100%;
 17     height: 100%;
 18     /*background-color:red;*/
 19 }
 20 #navigation_bar{
 21     width: 100%;
 22     height: 40px;
 23     /*background-color: green;*/
 24     text-align: right;/*文字内容靠右*/
 25     line-height: 40px;/*保证文字的垂直方向居中*/
 26 }
 27 #navigation_bar span{
 28     padding: 0px 10px 0px 0px;
 29     font-size: 14px;
 30     /*color:#333;*/
 31     color:#404040;
 32 }
 33 #logoDiv{
 34     width: 270px;
 35     height: 129px;
 36     /*background-color: blue;*/
 37     margin: 0 auto; /* 布局居中的一种写法 */
 38 }
 39 #inputDiv{
 40     width: 660px;
 41     height: 180px;
 42     /*background-color: yellow;*/
 43     /*margin: 0 auto;此处不写，因为在后面进行绑定*//* 布局居中的一种写法 */
 44     padding: 15px 0px 0px 0px;
 45 }
 46 #inputView{
 47     border:solid 1px #4791ff;
 48     width:530px;
 49     height: 15px;
 50     font-size: 16px;
 51     padding: 10px;
 52     
 53 }
 54 #submitView{
 55     width:98px;
 56     height:37px;
 57     border: solid 1px #4791ff;
 58     background-color: #3385ff;
 59     color: #ffffff;
 60     font-size: 15px;
 61     cursor: pointer;
 62 }
 63 #submitView:HOVER {
 64     background-color: #317ef3;/*鼠标移动过去时，背景颜色发生变化*/
 65 }
 66 #keywordDiv{
 67     width: 650px;
 68     height: 100px;
 69     background-color: #ffffff;
 70     border: solid 1px #cccccc;
 71 }
 72 #keywordDiv div{
 73     height: 20px;
 74     line-height: 20px;
 75     font-size: 16px;
 76     font-weight: bold;
 77     padding: 5px 0px 0px 5px;
 78 }
 79 .newsitem_title{
 80     color: blue;
 81     font-size: 16px;
 82     padding: 10px 0px 0px 10px;
 83 }
 84 .newsitem_desc{
 85     color: #666666;
 86     font-size: 12px;
 87     padding: 10px 0px 0px 10px;
 88 }
 89 .newsitem_href{
 90     color: #528000;
 91     font-size: 12px;
 92     padding: 10px 0px 30px 10px;
 93 }
 94 </style>
 95 </head>
 96 <body>
 97 
 98     <div id="myBodyl">
 99         <div id="navigation_bar" v-if="logo">
100             <span>新闻</span><span>hao123</span><span>地图</span><span>视频</span><span>贴吧</span><span>学术</span><span>登录</span><span>设置</span>
101         </div>
102         
103         <div id="logoDiv" v-if="logo">
104             <img src="img/bd_logo1.png" width="270" height="129"/>
105         </div>
106         
107         <div id="inputDiv" v-bind:style="{margin:inputDivStyle}">
108             <!--  v-model="word"：监视此属性的值 -->
109             <input type="text" id="inputView" v-model="word"><input type="submit" id="submitView" value="百度一下">
110             <!-- 判断是否显示输入框下面的相关内容 -->        
111             <div id="keywordDiv" v-if="keywordShow">
112                 <div v-for="item in keywordList" @click="selectItem(item)">{{item.word}}</div>
113             </div>
114         </div>
115         <!-- 遍历获取过来的信息 -->
116         <div v-for="item in newsList">
117             <div class="newsitem_title">{{item.title}}</div>
118             <div class="newsitem_desc">{{item.desc}}</div>
119             <div class="newsitem_href">{{item.href}}</div>
120         </div>
121         
122     </div>
123     <script src="${pageContext.request.contextPath}/js/vue.js"></script>
124     <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
125     <script>
126     
127         //keywordShow：输入框下面的显示内容框
128         //keywordList/newsList：后台获取过来的json信息
129         //clickMyself：标记作用，判断是否是用户输入的内容还是用户点击输入框下面选择的内容    
130         new Vue({
131             el:"#myBodyl",
132             data:myModel={
133                     logo:true,
134                     word:'',
135                     inputDivStyle:'0 auto',
136                     keywordShow:false,
137                     clickMyself:false,
138                     keywordList:[],
139                     newsList:[]
140                 },
141             methods:{
142                 selectItem:function(item){
143                     this.word=item.word;
144                     this.keywordShow=false;
145                     this.clickMyself = true;//标记一下，是用户自己点击
146                 }
147             },
148             watch:{
149                 word:function(){
150                     if(this.clickMyself==true){
151                         this.clickMyself=false;
152                         console.log('客户自己选中，不是输入，此方法自动退出');
153                         return;//如果是自己点击，就不用再去访问下面代码，避免重复访问后台
154                     }
155                     console.log('模型word的值变了');
156                     this.logo=false;
157                     this.inputDivStyle='10px';
158                 
159                     $.ajax({
160                         //url:"ServiceAPI001.jsp",
161                         url:'ServiceAPI001.jsp',
162                         type:"get",
163                         //data:"",
164                         dataType:"json",
165                         timeout:2000,
166                         success:function(result){
167                             myModel.keywordShow=true;
168                             myModel.keywordList=result.keywordList;
169                             myModel.newsList=result.newsList;
170                         },
171                         error:function(XMLHttpRequest, textStatus, errorThrown){
172                             alert('服务器忙，请不要说脏话，理论上大家都是文明人');
173                             alert(textStatus+XMLHttpRequest.status);
174                         }
175                     }); 
176                 }
177             }
178         });
179     </script>
180 </body>
181 </html>

下面是json数据

1 <!-- 文件名（即请求地址）：ServiceAPI001.jsp -->
2 
3 <%@ page language="java" contentType="text/html; charset=UTF-8"
4     pageEncoding="UTF-8"%><%
5     Thread.sleep(800);
6     
7     %>{"keywordList":[{"word":"刘亦菲重返校园"},{"word":"刘亦菲"},{"word":"刘德华"},{"word":"刘诗诗"}],"newsList":[{"title":"新闻标题1","desc":"内容描述1","href":"http://xxx/link1.jsp"},{"title":"新闻标题2","desc":"内容描述2","href":"http://xxx/link2.jsp"},{"title":"新闻标题3","desc":"内容描述3","href":"http://xxx/link3.jsp"}]}
8