jsp页面通过ajax向后台传参实现收藏功能

原创 2017年03月04日 21:58:59

好久没写文章,之前的项目转成毕设了所以又逼着自己推了推进度。
这次主要是填上次的坑。
上一篇写到了做的web页面用于展示。但是还有很多问题没有解决,比如分页显示,比如如何将标记的结果传给后台。这次写一写怎么实现这些功能。
先放效果,这个下面是读取数据库进行分页显示。
这里写图片描述
另一个功能是通过ajax给后台数据库添加数据,当你勾选任何一个checkbox,无论点击上一页下一页还是跳转都能把勾选的id号传给后台。
下面先简单讲一下分页,后台代码很简单,在写的disDAO里面负责从数据库提取数据,写一个方法public ArrayList display(int pageNum)返回这一页的菜谱即可。
后台我一直都会写其实是前端把我难住了,查了一下用这种写法,url传参数,一个是用户id一个是page页码(我知道该用cookie的以后再填坑吧)
http://localhost:8079/rec_sys.jsp?page=15&id=1
上一页下一页和跳转在前端怎么写呢?用JavaScript写,window.location.href就是在js里面跳转页面,参数就写在后面因为是get方法?后面就是参数

function jumpTo(maxPage){
            like();
            var page = document.getElementById("jump").value;
            if(page > maxPage || page < 1 ) {
                alert('请输入正确的页码!');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+page+"&id="+<%=id%>;
            }

        }
        function prePage(){
            like();
            var page = <%=pagenum%>;
            if(page == 1 ) {
                alert('已经到达第一页');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+(page-1)+"&id="+<%=id%>;
            }
        }
        function nextPage(){
            like();
            var page = <%=pagenum%>;
            if(page == <%=totalpage%> ) {
                alert('已经到达最后一页');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+(page+1)+"&id="+<%=id%>;
            }
        }

接下来是重点,我不知道ajax怎么写。
上网查了代码发现我踩了个坑,$这个函数IDEA不识别,我也不知道怎么回事浏览器调试的时候都不知道为啥,花了好久才知道不是js原生的,是jquery库里面的。。。
加了下面一句就能引入jquery库了

    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

我的第一列是这样写的

            <td><input type = "checkbox"  value ='<%=re.getId() %>' name="like" /></td>

然后找到所有的选中的checkbox,得到value值就知道喜欢的菜谱id了,然后ajax传入后台。
把下面这个函数放到其他按钮按下的执行的函数里面,无论按那个按钮都会触发了。

function like(){//这个方法是将DOM对象里面名字为like的都找出来.然后被选中的加入到json传递.用ajax交互
            var list =new Array();
            var check=document.getElementsByName("like");
            for(var i=0;i<check.length;i++){
                if(check[i].checked==true){//检查checkbox是否已选中
                    list.push(check[i].value);
                }
            }
            $.ajax({//通过ajax传给一个servlet处理
                type:"POST", //请求方式
                url:"/likeList", //请求路径
                data:{"list":list,
                    "id":<%=id
                %>},
                traditional: true,//加上这个就可以传数组
                dataType : 'json',
                success:function(result){
                }
            });
        }

关于如何传数组给后台参考了文章:http://blog.csdn.net/yhj19920417/article/details/48690439

下面放上这个jsp页面的所有代码:

<%@ page import="com.sun.dao.DisDAO" %>
<%@ page import="com.sun.vo.RecipeVo" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: sunyang
  Date: 2016/12/8
  Time: 下午1:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>推荐系统</title>
</head>
<body>
<%  String id =request.getParameter("id");
    int pagenum=Integer.parseInt(request.getParameter("page"));
    System.out.println(pagenum);
%>

<%  DisDAO dd=new DisDAO();
    ArrayList<RecipeVo> list=dd.display(pagenum);
    int totalpage=dd.gettotalPage();
%>
<html>
<head>
    <style type = "text/css">
        td{

            width:60px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

    <script type="text/javascript">

        function jumpTo(maxPage){
            like();
            var page = document.getElementById("jump").value;
            if(page > maxPage || page < 1 ) {
                alert('请输入正确的页码!');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+page+"&id="+<%=id%>;
            }

        }
        function prePage(){
            like();
            var page = <%=pagenum%>;
            if(page == 1 ) {
                alert('已经到达第一页');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+(page-1)+"&id="+<%=id%>;
            }
        }
        function nextPage(){
            like();
            var page = <%=pagenum%>;
            if(page == <%=totalpage%> ) {
                alert('已经到达最后一页');
                return;
            }else {
                window.location.href="rec_sys.jsp?page="+(page+1)+"&id="+<%=id%>;
            }
        }
        function like(){//这个方法是将DOM对象里面名字为like的都找出来.然后被选中的加入到json传递.用ajax交互
            var list =new Array();
            var check=document.getElementsByName("like");
            for(var i=0;i<check.length;i++){
                if(check[i].checked==true){//检查checkbox是否已选中
                    list.push(check[i].value);
                }
            }
            $.ajax({//通过ajax传给一个servlet处理
                type:"POST", //请求方式
                url:"/likeList", //请求路径
                data:{"list":list,
                    "id":<%=id
                %>},
                traditional: true,//加上这个就可以传数组
                dataType : 'json',
                success:function(result){
                }
            });
        }
        function reconmmend(){
            like();
            window.location.href="recommend?id="+<%=id%>;
        }
    </script>
</head>

<body>
<div id = "main">
    <table width="1000" border ="1" align = "center" style="border-collapse:collapse;">
        <tr align="center">
            <td colspan="8">
                食谱大全
            </td>
        </tr>
        <tr align="center">
            <td>感兴趣</td>
            <td>菜谱ID</td>
            <td>菜谱名称</td>
            <td width="400">做法</td>
            <td>特性</td>
            <td>提示</td>
            <td>调料</td>
            <td>原料</td>
        </tr>

        <%for(int i = 0 ; i<list.size();i++) {

            RecipeVo re = list.get(i);%>
        <tr align="center" >
            <td><input type = "checkbox"  value ='<%=re.getId() %>' name="like" /></td>
            <td><%=re.getId() %></td>
            <td><%=re.getName() %></td>
            <td width="400"><%=re.getZuofa() %></td>
            <td><%=re.getTexing() %></td>
            <td><%=re.getTishi() %></td>
            <td><%=re.getTiaoliao() %></td>
            <td><%=re.getYuanliao() %></td>
        </tr>
        <%
            }
        %>
    </table>

    <div id="pageControl" align="center">
        <!-- 上一页 按钮 -->
        <input type="button" value="上一页" id="prePage" onclick="prePage()" >

        <!-- 下一页 按钮 -->
        <input type="button" value="下一页" id="nextPage" onclick="nextPage()" >

        <!-- 直接跳转 --><%=totalpage%>页 当前<%=pagenum%>页 -向<input type="text" id="jump" /><input type="button" value="跳转" onclick="jumpTo(<%=totalpage%>)" />
    </div>

    <table align="center">
        <tr>
            <td><input type ="button" value ="推荐结果" onclick="reconmmend()"/></td>
        </tr>
    </table>
</div>
</body>
</html>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_18497785/article/details/60351307

ajax 点赞收藏功能

医院科室-专家咨询 /s/css/rmyy/dept.css"> /s/js/jquery-1.9.1.js"> /s/js/css...
  • a576736858
  • a576736858
  • 2016-05-31 19:31:24
  • 2617

商品收藏模块的功能设计实现

电商网站的商品收藏功能实现              商品收藏的功能描述:用户对一件商品重复的进行收藏与取消收藏操作。点击收藏,将商品收藏成功,并且图标变为   已收藏;点击已收藏,则取消对该商品的收...
  • qq_38797181
  • qq_38797181
  • 2017-05-25 13:46:59
  • 2257

设为首页,加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码

js代码: 复制代码 代码如下: // 设置为主页 function SetHome(obj,vrl){ try{ obj.style.behavior='url(#default#hom...
  • ONisNull
  • ONisNull
  • 2017-06-22 17:00:16
  • 516

用JSP实现网页收藏实例源码

  • 2010年07月16日 15:06
  • 835KB
  • 下载

JSP事件收藏

jsp 中有哪些监听事件可以引发页面跳转 onClick                 鼠标单击 onChange             文本内容或下拉菜单中的选项发生改变 onFoc...
  • u011878202
  • u011878202
  • 2014-04-10 17:13:12
  • 495

jsp设置主页和加入收藏

  • Lee_Decimal
  • Lee_Decimal
  • 2010-09-24 16:59:00
  • 1870

实现收藏本网站的功能

兼容Firefox和IE浏览器的方法 第一种方法: function addfavorite() {    if (document.all)    {       w...
  • linlin2294592017
  • linlin2294592017
  • 2013-11-18 12:16:13
  • 3217

jquery实现收藏效果

function fav() { try { window.external.addFavorite(sURL, sTitle); } catch(e) { try { w...
  • hjt321658
  • hjt321658
  • 2013-12-22 11:09:23
  • 869

用ajax向后台传参的几种方式

用ajax传参的几种方式
  • qq_37644380
  • qq_37644380
  • 2017-05-07 15:06:05
  • 5901

APP收藏功能

常见的收藏方式: NSUserDeault 存储简单的东西,软件的一些参数设置,没有指定文件,他有默认文件 NSKeyArchi  保存一些相对复杂的对象,数据量不能太大,写入直接把整一个对象写到...
  • u012795704
  • u012795704
  • 2014-12-08 23:19:10
  • 311
收藏助手
不良信息举报
您举报文章:jsp页面通过ajax向后台传参实现收藏功能
举报原因:
原因补充:

(最多只允许输入30个字)