cuojing0496
2017-06-20 07:48
采纳率: 0%
浏览 1.7k

关于ajax和ssm框架之间传值的问题

这里是jsp中的代码

$().ready(function() { $(".caidandanhang").mouseover(function(){ $(this).css("color", "#900"); $(".fenlei").css("display", "block"); var id=$(this).data("id"); $.ajax({ type:"post", url:"changetype", data:"id="+id+"", dataType:"json", success:function(data){ } }); }); $(".caidandanhang").mouseout(function(){ $(this).css("color", "#fff"); $(".fenlei").css("display", "none"); }); });

这里是controller的代码

@RequestMapping(value="/changetype",method={RequestMethod.POST,RequestMethod.GET})
public void changetype(Integer id){
    List<YiCeng> list = bs.searchType(id);
    JSONArray json = JSONArray.fromObject(list);
    PrintWriter out=null;
    out.print(json);
}

现在想实现的功能是 在我鼠标移上的时候展示这个分类里面所有的小分类 现在list拿到了我想展示的小分类 但是不知道怎么传到前台 然后前台怎么处理放到页面????求大神。。!!!!!!!!

附上 前台jsp 的完整代码:想把找到的list在id为fenlei的div中展示


<!-- 可隐藏栏 -->




×



style="width: 100%;height: 30px;background-color: #e3e4e5;z-index:-1;position:absolute;">




北京

上海

天津

重庆

河北

山西

河南

辽宁

吉林

黑龙江

内蒙古

江苏

山东

安徽

浙江

福建

湖北

湖南

广东

广西

江西

四川

海南

贵州

云南

西藏

陕西

甘肃

青海

宁夏

新疆

港澳

台湾

钓鱼岛

海外



<!-- 图标 -->



<!-- 横向登陆注册菜单等等 -->


    <div style="width:1190px;margin:0 auto;">
        <div id="shangpinliebiao">
        <div id="fenleikuang"></div>
            <div style="width:190px;height:450px;margin-top:15px;">
            <%List<YiCeng> yicenglist=(List<YiCeng>)request.getAttribute("list");
            for(int i=0;i<yicenglist.size();i++){
             %>
                <div onclick="location.href='bookhomepage'" data-id=<%=yicenglist.get(i).getId()%> class="caidandanhang"><%=yicenglist.get(i).getName() %></div>
                <%} %>
            </div>
        </div>



        <div class="fenlei" 
            style="width:700px;height:400px;display:none;z-index:1;background-color:#fff;border:1px black solid;position: absolute;left:200px;">
                <%
            List<BigType> list = (List<BigType>) request
                    .getAttribute("typelist");

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

        %>
            <div style="width:700px;height:50px;">



                <div style="width:150px;height:50px;color:#666;font-size:14px;font-weight:bold;float: left;">
                <%= list.get(i).getB_typename() %>
                </div>
                <ul style="list-style:none">
                <%List<SmallType> slist=list.get(i).getList();

                for(SmallType st:slist){
                 %>
                <li style="list-style:none;width:160px;height:50px;color:#666;font-size:14px;float: left;">
                <%= st.getS_typename() %>
                </li>
                <%} %>
                </ul>
            </div>

<%} %>

        <div id="zhutu">
            <div id="lunbotu">
                <ul id="lunboimgUl">
                    <li><a href=""><img src="images/586b49bcNd786cb33.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/591011e4N103be08a.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/591015bdN4dc555a0.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/591048a4N7dd3f530.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" />
                    </a></li>
                    <li><a href=""><img src="images/590bf9f9N4b166d34.jpg" />
                    </a></li>
                </ul>
                <div id="icon">
                    <ul id="iconUl">
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div id="zuojiantou" style="color:#FFF">
                    <svg class="icon" aria-hidden="true"> <use
                        xlink:href="#icon-back"></use> </svg>
                </div>
                <div id="youjiantou" style="color:#FFF">
                    <svg class="icon" aria-hidden="true"> <use
                        xlink:href="#icon-more"></use> </svg>
                </div>

            </div>
            <div id="zuotu">
                <a><img src="images/59118ba6N72b56d4e.jpg!q90" /> </a>
            </div>
            <div id="youtu">
                <a><img src="images/5914035bN928a1a08.jpg" /> </a>
            </div>
        </div>
        <div id="kuaijietongdao">
            <div id="yonghu">
                <div id="huanyingyonghu">
                    <div id="yonghutouxiang">
                        <img src="images/no_login.jpg" width="40px;" height="40px;"
                            style="border-radius:40px;" />
                    </div>
                    <div id="dengluzhuce">
                        <a>Hi,欢迎来到京东..</a><br /> <a href="">登录</a> <a href="">注册</a>
                    </div>
                </div>
                <div id="xinrenfuli">
                    <a>新人福利</a>
                </div>
                <div id="PULShuiyuan">PULS会员</div>
            </div>
            <div id="cuxiaoguanggao">
                <div
                    style="width:160px;height:22px;margin:7px auto;font-size:12px;border-bottom:1px solid #e6e6e6;">
                    <div id="cuxiao">
                        <a>促销</a>
                    </div>
                    <div
                        style="width:9px;height:16px;float:left;border-right:1px solid #dfe0e1;"></div>
                    <div id="guanggao">
                        <a>广告</a>
                    </div>
                    <div id="gengduo">
                        <a href="">更多</a>
                    </div>
                </div>
                <div style="font-size:12px;line-height:25px;margin-left:15px;">
                    <p>
                        <a>爆款秒杀 低至五折</a>
                    </p>
                    <p>
                        <a>京东健康母亲节关爱不打折</a>
                    </p>
                    <p>
                        <a>抢4999,爆款手机买1送1</a>
                    </p>
                    <p>
                        <a>母亲节,有爱就“购”了</a>
                    </p>
                </div>
            </div>
            <div id="richangshenghuo">
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:0px -86px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">话费</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:0px -43px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">机票</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-44px -86px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">酒店</a>
                    </div>
                </div>
                <div class="shenghuotubiao" style="border-right:0px;">
                    <div class="shenghuotu" style="background-position:-88px 0px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">游戏</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-88px -43px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">企业购</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:0px 0px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">加油卡</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-44px -43px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">电影票</a>
                    </div>
                </div>
                <div class="shenghuotubiao" style="border-right:0px;">
                    <div class="shenghuotu" style="background-position:-88px -86px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">火车票</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-132px 0px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">众筹</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-132px -43px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">理财</a>
                    </div>
                </div>
                <div class="shenghuotubiao">
                    <div class="shenghuotu" style="background-position:-132px -86px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">礼品卡</a>
                    </div>
                </div>
                <div class="shenghuotubiao" style="border-right:0px;">
                    <div class="shenghuotu" style="background-position:-44px 0px;"></div>
                    <div class="shenghuowenzi">
                        <a href="">白条</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div style="width:100%;background-color:#eaeaea;margin-top:0px;">
    <div style="width:1190px;margin:0 auto;">
        <img src="images/di.png" width="1190px;" height="500px;">
    </div>
</div>

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • 初雪的季节 2017-06-20 07:49
    打赏 评论
  • 南宫文凯 2017-06-20 08:05

    $().ready(function() {
    $(".caidandanhang").mouseover(function() {
    $(this).css("color", "#900");
    $(".fenlei").css("display", "block");
    var id = $(this).data("id");
    $.ajax({
    type: "post",
    url: "changetype",
    data: "id=" + id + "",
    dataType: "json",
    success: function(data) {}
    });
    });
    $(".caidandanhang").mouseout(function() {
    $(this).css("color", "#fff");
    $(".fenlei").css("display", "none");
    });

        //没有页面
        代码
    
    打赏 评论
  • x_mario 2017-06-20 08:09

    public JsonResult changetype(Integer id){
    List list = bs.searchType(id);
    JSONArray json = JSONArray.fromObject(list);
    return json;
    }

    $.ajax({
    type: "post",
    url: "changetype",
    data: "id=" + id + "",
    dataType: "json",
    success: function(data) {
    这里的data就是你返回的json
    你可以在这里循环生成table
    }
    });

    也可以set进request中,使用EL表达式拿返回回来的值

    打赏 评论
  • x_mario 2017-06-20 08:31

    我刚看到,你那个返回不用改,你现在是能获取到但是不知道页面怎么来用是吧?
    你试试下面这个,

    ```success: function(data) {
    var obj = eval(data);
    $(obj).each(function (index) {
    var val = obj[index];
    $("body").append("

    " + val.Id + " " + val.Name + " " + val.Pwd + "
    ");
    //亦或者你从这个data按你存进去的键值对的key来给相应的标签赋value值
    });
    }
    
    
    打赏 评论
  • x_mario 2017-06-20 08:34
    `success: function(data) {
    var obj = eval(data);
    $(obj).each(function (index) {
    var val = obj[index];
    $("body").append("<div>" + val.Id + " " + val.Name + " " + val.Pwd + "</div>");
    //亦或者你从这个data按你存进去的键值对的key来给相应的标签赋value值
    });
    }
    
    
    
    打赏 评论

相关推荐 更多相似问题