hooyantsing's Blog

前后端分离经典案例

字数统计: 2.8k阅读时长: 15 min
2019/11/23

前后端分离经典案例

描述:前端通过Ajax传递参数给后端,后端处理后通过json传递给前端

前端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<%@ page language="java"  contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/index.css"  />
<script  src="js/jquery-1.7.2.min.js"></script>
<script src="js/main.js"></script>
<title>Document</title>
<!--
    开发者:Hooyantsing
    本页面应用了大面积的Ajax,实现了前后端分离。
-->
<script>
    function page(p){
       var pa = $(p).attr('page');
       query(pa);
    }
    
    function query(pa){
       $('#point').html("");
       $('#page').html("");
       var page = pa==null ? "1" : pa;
       var select1 =  $('#selectA').children().text();
       var select2 =  $('#selectB').children().text();
       var select3 =  $('#selectC').children().text();
       var select4 =  $('#selectD').children().text();
       $.ajax({
            type : "GET",
            url : "list.s",
            data : {
                'op' : 'content',
                'page' : page,
                'select1' : select1,
                'select2' : select2,
                'select3' : select3,
                'select4' : select4
            },
            dataType : "json",
            success :  function(data) {
                for(var  i=0;i<data.data.length;i++){  
                   $('#point').append(
                           "<dl id='"+i+"'>"
                       +      "<dt>"
                       +          "<a  href='detail.jsp'><img  src='"+data.data[i].bimage+"' alt='' /></a>"
                       +      "</dt>"
                       +      "<dd>"
                       +          "<p>"
                       +              "<a  href='detail.jsp'>"+data.data[i].bname+"</a>"
                       +          "</p>"
                       +          "<p>数量:99</p>"
                       +          "<p>"
                       +              "<s>价格:¥"+data.data[i].bmarket_price+"</s> ¥"+data.data[i].bshop_price+" "
                       +          "</p>"
                       +      "</dd>"
                       +   "</dl>"    
                   );
                }
                
                var lastPage =  Math.floor(data.total % data.rows == 0 ?  (data.total/data.rows) :  (data.total/data.rows + 1));
                var previousPage = data.page  > 1 ? data.page - 1 : 1;
                var nextPage = data.page <  lastPage ? data.page + 1 : lastPage;
                var leftPage = data.page - 2  < 2 ? 1 : data.page - 2;
                var rightPage = data.page + 2  > lastPage ? lastPage : data.page + 2;
                
                $('#page').append(
                       "<a page='1'  href='javascript:void(0)'  onclick='page(this)'>首页</a>"
                   +   "<a  page='"+previousPage+"'  href='javascript:void(0)'  onclick='page(this)'>上一页</a>"
                );
                for (var i = leftPage; i <=  rightPage; i++) {
                   if (data.page == i){
                       $('#page').append(
                           "<a page='"+i+"'  class='bg-blue' href='javascript:void(0)'  onclick='page(this)'>"+data.page+"</a>"
                       );
                   } else {
                       $('#page').append(
                           "<a page='"+i+"'  href='javascript:void(0)'  onclick='page(this)'>"+i+"</a>"
                       );
                   }
                }
                $('#page').append(
                       "<a  page='"+(nextPage==0 ? 1 : nextPage)+"'  href='javascript:void(0)'  onclick='page(this)'>下一页</a>"
                   +   "<a  page='"+(lastPage==0 ? 1 : lastPage)+"'  href='javascript:void(0)'  onclick='page(this)'>尾页</a>"
                );
            }
       });
    }
    
    $(document).ready(query());
</script>
</head>
<body>
    <div id="msgPage" ></div>
    <div class="top" id="item4">
       <div class="container clearfix">
           <ul class="clearfix fr">
               <li><a  href="join.jsp#tologin">登录</a></li>
               <li><a  href="join.jsp#toregister">注册</a></li>
               <li><a href="member.jsp"  style="border: none">个人中心</a></li>
           </ul>
       </div>
    </div>
    <div class="header">
       <div class="container clearfix">
           <div class="logo fl">
               <a href="index.jsp"><img  src="images/logo4.png" alt="" /></a>
           </div>
           <div class="seacher fl">
               <form action=""  method="post">
                  <input type="text"  placeholder="小伙伴,你想找什么?" /><input  type="submit"
                      value="搜 索" />
               </form>
               <p>
                  热门搜索:<a href="#">自行车</a> <a href="#">笔记本</a> <a href="#">散热器</a> <a
                      href="#">考研资料</a>  <a href="#">摩托车</a> <a href="#">手机</a>  <a
                      href="#">轮滑鞋</a> <a  href="#">显示器</a> <a href="#">显示器</a> <a
                      href="#">显示器</a> <a  href="#">显示器</a>
               </p>
           </div>
           <div class="mm fr clearfix">
               <a href="list.jsp">我要买</a>  <a href="publish.jsp">我要卖</a>
           </div>
       </div>
    </div>
    <div class="list-main">
       <div class="container">
           <div class="bread"  style="margin-bottom: 0;">
               当前位置: <a href="index.jsp">首页</a> > <a  href="list.jsp">列表</a>
           </div>
           <ul class="select"  onclick="query()">
               <li class="select-list">
                  <dl id="select1" >
                      <dt>学校:</dt>
                      <dd class="select-all  selected">
                          <a href="#">全部</a>
                      </dd>
                      <dd>
                          <a href="#">深圳大学</a>
                      </dd>
                      <dd>
                          <a href="#">深圳技师学院</a>
                      </dd>
                      <dd>
                          <a href="#">深圳广播电视大学</a>
                      </dd>
                      <dd>
                          <a href="#">深圳香港中文大学</a>
                      </dd>
                      <dd>
                          <a href="#">深圳市华强职业技术学校</a>
                      </dd>
                      <dd>
                          <a href="#">深圳大学医学院</a>
                      </dd>
                      <dd>
                          <a href="#">深圳华中科技大学研究院</a>
                      </dd>
                      <dd>
                          <a href="#">深圳南方科技大学</a>
                      </dd>
                  </dl>
               </li>
               <li class="select-list">
                  <dl id="select2">
                      <dt>学院:</dt>
                      <dd class="select-all  selected">
                          <a href="#">全部</a>
                      </dd>
                      <dd>
                          <a href="#">传播学院</a>
                      </dd>
                      <dd>
                          <a href="#">文学院</a>
                      </dd>
                      <dd>
                          <a href="#">外国语学院</a>
                      </dd>
                      <dd>
                          <a href="#">软件学院</a>
                      </dd>
                      <dd>
                          <a href="#">音乐学院</a>
                      </dd>
                  </dl>
               </li>
               <li class="select-list">
                  <dl id="select3">
                      <dt>专业:</dt>
                      <dd class="select-all  selected">
                          <a href="#">全部</a>
                      </dd>
                      <dd>
                          <a href="#">教育技术学</a>
                      </dd>
                      <dd>
                          <a href="#">传播学</a>
                      </dd>
                      <dd>
                          <a href="#">广告学</a>
                      </dd>
                      <dd>
                          <a href="#">不知道了</a>
                      </dd>
                  </dl>
               </li>
               <li class="select-list">
                  <dl id="select4">
                      <dt>年级:</dt>
                      <dd class="select-all  selected">
                          <a href="#">全部</a>
                      </dd>
                      <dd>
                          <a href="#">大一</a>
                      </dd>
                      <dd>
                          <a href="#">大二</a>
                      </dd>
                      <dd>
                          <a href="#">大三</a>
                      </dd>
                      <dd>
                          <a href="#">大四</a>
                      </dd>
                  </dl>
               </li>
               <li class="select-result">
                  <dl id="result">
                      <dt>已选条件:</dt>
                      <dd  class="select-no">暂时没有选择过滤条件</dd>
                  </dl>
               </li>
           </ul>
           <div class="tabs book clearfix">
               <div id="point">  
               </div>
               <div class="clearfix"></div>
               <div class="page clearfix"  id="page">
               </div>
           </div>
       </div>
    </div>
    <div class="foot">
       <div class="container">
           <div class="zhinan">
               <ul class="clearfix">
                  <li class="item-li">关于我们
                      <ul>
                          <li><a  href="help.jsp">自我介绍</a></li>
                          <li><a  href="help.jsp">联系我们</a></li>
                          <li><a  href="help.jsp">网站公告</a></li>
                      </ul>
                  </li>
                  <li class="item-li">新手指南
                      <ul>
                          <li><a  href="help.jsp">如何买书</a></li>
                          <li><a  href="help.jsp">如何卖书</a></li>
                          <li><a  href="help.jsp">修改密码</a></li>
                      </ul>
                  </li>
                  <li class="item-li">配送方式
                      <ul>
                          <li><a  href="help.jsp">配送范围</a></li>
                          <li><a  href="help.jsp">配送时间</a></li>
                      </ul>
                  </li>
                  <li class="item-li">售后服务
                      <ul>
                          <li><a  href="help.jsp">退款申请</a></li>
                          <li><a  href="help.jsp">退换货处理</a></li>
                          <li><a  href="help.jsp">退换货政策</a></li>
                      </ul>
                  </li>
               </ul>
           </div>
           <div class="line"></div>
           <div class="bottom">
               <p>
                  友情链接:<a href="#">安工在线</a>&nbsp;&nbsp;<a href="#">万林强-前端在线简历</a>
               </p>
               <p>本站所有信息均为用户自由发布,本站不对信息的真实性负任何责任,交易时请注意识别信息的真假如有网站内容侵害了您的权益请联系我们删除,举报电话:15068718875</p>
               <p>技术支持:万林强  &nbsp;&nbsp;商务QQ:584845663
                  &nbsp;&nbsp;邮箱:584845663@qq.com</p>
           </div>
       </div>
    </div>
</body>
</html>

后端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
package ebn.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.mail.MessagingException;
import javax.mail.internet.AddressException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import ebn.util.DBHelper;
import ebn.util.DBHelper.Page;

@WebServlet("/list.s")
public class ListServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;
    private static final int ROWS = 14;

    public void content(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, AddressException, MessagingException {
        response.setContentType("text/html; charset=GBK");
        String select1 = request.getParameter("select1").trim();
        String select2 = request.getParameter("select2").trim();
        String select3 = request.getParameter("select3").trim();
        String select4 = request.getParameter("select4").trim();
        String page = request.getParameter("page").trim();
        
        StringBuilder sql = new StringBuilder("select * from books where 1=1 ");
        List<String> parameter = new ArrayList<String>();
        
        int pageNum = "".equals(page) ? 1 : Integer.parseInt(page);
        if(pageNum<=0) {
            return;
        }
        
        if(!("".equals(select1))) {
            sql.append(" and bschool = ? ");
            parameter.add(select1);
        }
        if(!("".equals(select2))) {
            sql.append(" and bcollege = ? ");
            parameter.add(select2);
        }
        if(!("".equals(select3))) {
            sql.append(" and bajor = ? ");
            parameter.add(select3);
        }
        if(!("".equals(select4))) {
            sql.append(" and bgrade = ? ");
            parameter.add(select4);
        }
        
        Page box = DBHelper.selectPageForMysql(sql.toString(), pageNum, ROWS, parameter.toArray());
        Gson gson = new Gson();
        String json = gson.toJson(box);
        response.getWriter().print(json);

    }
}
CATALOG