.net2003+ajax淘宝上的查看图片的那效果

最新推荐文章于 2025-09-10 22:02:05 发布

lem12

最新推荐文章于 2025-09-10 22:02:05 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： AjaX 文章标签： ajax .net div dataset function callback

本文链接：https://blog.youkuaiyun.com/lem12/article/details/1592582

AjaX 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用ASP.NET和AJAX实现一个简单的图片预览功能。通过鼠标悬停在DataList中的小图片上，可以异步加载并显示对应的大尺寸图片。此功能涉及到XMLHttpRequest对象的使用以及前后端的数据交互。

今天刚到公司看到群里有朋友问了这个效果,因为没什么事所以写了一个与大家分享一下.

1.建两张页面main.aspx,selpic.aspx
在main.aspx页面中写js代码如下:

var xmlhttp=false;

function GetXmlHttp()

{

try

{

xmlhttp=new ActiveXObject("Msxml2.XMLHTTP3.0");

}

catch(e)

{

try

{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

xmlhttp=false;

}

return xmlhttp;

}

function pic(id)

{

GetXmlHttp()

var url="selpic.aspx?id="+id;

xmlhttp.onreadystatechange=callback;

xmlhttp.open("post",url,true);

xmlhttp.send();

}

function callback()

{

var imag=document.getElementById("im");

var div1=document.getElementById("div1");

var div2=document.getElementById("div2");

if(xmlhttp.readyState==1)

{

div2.style.visibility="visible";

}

else if(xmlhttp.readyState==4)

{

div2.style.visibility="hidden";

div1.style.visibility="visible";

var info=xmlhttp.responseText;

imag.src=info;

//alert(info);

}

function hid()

{

var div1=document.getElementById("div1");

var div2=document.getElementById("div2");

div2.style.visibility="hidden";

div1.style.visibility="hidden";

}

html中放一个DataList,两个层和一个图片控件,如下代码:

<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 128px; POSITION: absolute; TOP: 48px"

runat="server">

<TR>

</TR>

<TR>

<IMG style="WIDTH: 105px; HEIGHT: 88px" height="88" alt="" src='<%# DataBinder.Eval(Container.DataItem,"picpath")%>' width="105" onmouseover="pic('<%# DataBinder.Eval(Container.DataItem,"uname")%>');" onmouseout="hid();">

</TD>

</TR>

</TABLE>

</FONT>

</ItemTemplate>

</asp:DataList>

<DIV id="div1" style="DISPLAY: inline; Z-INDEX: 102; LEFT: 456px; VISIBILITY: hidden; WIDTH: 448px; POSITION: absolute; TOP: 176px; HEIGHT: 428px"

ms_positioning="FlowLayout">

</DIV>

<DIV id="div2" style="DISPLAY: inline; Z-INDEX: 102; LEFT: 456px; VISIBILITY: hidden; WIDTH: 448px; POSITION: absolute; TOP: 176px; HEIGHT: 428px"

ms_positioning="FlowLayout">

<font color=#ff99cc size="7">Loading...</font>

</DIV>

</form>

下面在main.aspx的窗体中写如下代码查出数据库中的数据绑定到DataList

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

if(!this.IsPostBack)

{

this.Bind();

}

private void Bind()

{

try

{

SqlConnection conn=new SqlConnection("server=.;database=Test;uid=sa;pwd=sa");

SqlDataAdapter da=new SqlDataAdapter("select * from taobao",conn);

DataSet ds=new DataSet();

da.Fill(ds,"ddd");

this.DataList1.DataSource=ds;

this.DataList1.DataBind();

}

catch(Exception Err)

{

Response.Write(Err.Message);

}

2.在selpic.aspx页面中写如下代码:(注:根据传过来的id查出图片地址返回给main.aspx页面)

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

if(!this.IsPostBack)

{

this.Bind();

}

private void Bind()

{

try

{

SqlConnection conn=new SqlConnection("server=.;database=Test;uid=sa;pwd=sa");

int uid=int.Parse(Request.QueryString["id"].ToString());

SqlDataAdapter da=new SqlDataAdapter("select * from taobao where id="+uid+"",conn);

DataSet ds=new DataSet();

da.Fill(ds,"ddd");

Response.Write(ds.Tables[0].Rows[0][2].ToString());

Response.End();

}

catch(Exception )

{

}