jsp页面到js,使用jquery显示详细信息

[size=medium][b]我现在想做一个功能,就是在displaytag的“显示详情”这列,鼠标上移就显示相应productId对应产品的详细信息。

想在displaytag的“查看详情”这一列跳到js文件,该怎么写?和js文件中的这句话:var as = $("a[name=showProductDetail]");有关系吗?我想用a标签过去的。
我这样写能在js当中接收到productId的值吗? 发到对应的action里应该怎么接收呢?

返回的内容可以在对应的showProductInfo div块里显示吗?

新手, 没有什么分数了,还是想请讲的明白点。

jsp页面代码:[/b][/size]

[code="java"]<%@ page contentType="text/html; charset=utf-8" language="java"
import="java.sql.*" errorPage=""%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



rel="stylesheet" />
当前招标项目详情
    <script type="text/javascript" src="../jsx/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="../jsx/dijit/dijit.js"></script>
    <script type="text/javascript" src="../jsx/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../jsx/jquery/jquery.form.js"></script>
    <script type="text/javascript" src="../js/productInfo.js"></script>
    <link rel="stylesheet" type="text/css" href="css/base.css"></link>
    <link rel="stylesheet" type="text/css" href="css/infoDiv.css"></link>

</head>

<body>
    <div id="body">
        <div id="info">
            <!--客户当前招标项目详细资料-->
            <display:table name="bidDetailList" id="bidDetail" pagesize="5"
                requestURI="showBidAndTenderInfos.action?bidId=${bidDetail.bidId}">
                <display:column property="bidId" title="招标项目编号" sortable="true" />
                <display:column property="productId" title="产品编号" sortable="true" />
                <display:column property="productNum" title="产品数量" sortable="true" />
                <display:column title="查看详情">
                                        </display:column>
            </display:table>

            <div id="showProductInfo">
                    正在载入产品信息... 
            </div>
        </div>
</body>

[/code]

以下是productInfo.js:
[code="java"]$(document).ready(function () {
var infoNode = $("#showProductInfo");
var as = $("a[name=showProductDetail]");
infoNode.hide();

as.mouseover(function (event) {
    var aNode = $(this);
    var productId = aNode.attr("productId");
    var myEvent = event || window.event;
    infoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px");
    var url = "showProductInfo.action?productId=" + productId;
    $.get(url, null, function (data) {
        infoNode.html(data);
        infoNode.show();
    });
});
as.mousemove(function (event) {
     var myEvent = event || window.event;
     infoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px");
});

as.mouseout(function () {
    infoNode.hide();
});

});[/code]

action部分代码:
[code="java"]public String showProductInfo() throws Exception{

    int productId=Integer.parseInt(request.getParameter("productId"));

    this.productInfo = this.projectService.findProductInfobyProductId(productId);
    StringBuilder result=new StringBuilder();
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out=response.getWriter();
    if (productInfo!= null) {
         result.append("类型:"+productInfo.getType()+"<br>");
         out.println(result);
    }
    else
    {
         out.println("wu");
    }
    return null;
}[/code]

2个回答

JQ我已经N久没用了,不是很熟悉了,不过
infoNode.html(data);这句不是已经把东西传回来了?难道你没有看到结果?
var productId = aNode.attr("productId");这个有值不?
你查看,1>JS里有没有URL,是不是完整的,
2>Action里有没有得到参数,你想打印,DEBUG随便,能让你知道就行.
3>Action返回后,JS的DATA有没有东西Alert看看,或是DEBUG.
如果这些都正常.那剩下的infoNode.html不就可以了.

正在载入产品信息...

好像是这样的:有一堆链接.然后你鼠标放上一个链接,就到服务器里搜索,然后结果返回,在鼠标附近显示这个DIV是不是,这个DIV默认的定位方式,好像是根据它的父结点,的,所以鼠标移动跟它没关系.改下CSS,position=absolute绝对定位,才可以移动:


或是你的nfoNode.css("left", myEvent.clientX - 50 + "px").css("top", myEvent.clientY + 20 + "px").css("position","absolute");

根本不懂你要什么,是不是AJAX啊.
我的理解:你想在一个DisplayTag里的一个A链接点击或是鼠标放上去,然后到服务器里查找数据,然后显示在ShowInfo DIV里是不是这样啊?
Jquery里的AJAX有许多方法,
$.GET,Post,AJAX都可以啊.
你想要传数据到服务器里,可以在URL里添加参数的.这个会吧.&Para=XX.
这样的.或是AJAX有发送数据的.Send(data).这在JQ里也有,你就随便Google下例子就知道了.服务器端也是Request.getParameter这样的.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!