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