http://blue.1718vip.com
 

2007-11-14 16:42:00
Ajax+asp实现三级联动

1.显示页面源码:


<>sdfsdf
<%@LANGUAGE="VB" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>产品添加</title>
<link href="/images/haocss.css" rel="stylesheet" type="text/css" />
< language="Java" src="/js/Prototype.js" type="text/Java"></>
< language="java" type="text/java">
                resetclass2()
    {
    form1.pclass2.length = 0;
    form1.pclass2.options[0] = new Option("二级分类","");
    form1.pclass2.options[0].selected=true;}
     resetclass1()
    {
    form1.pclass1.length=0;
    form1.pclass1.options[0] = new Option("请选择分类","");
    }
     resetclass3()
    {
    form1.pclass3.length = 0;
    form1.pclass3.options[0] = new Option("三级分类","");
    form1.pclass3.options[0].selected=true;}
 
     Start_***(url,Action)
     {
     var myAjax = new Ajax.Request(url,{method:'get',parameters:Action,onComplete:***_Receive });
     }
               ***_Receive(OriginalRequest)
       { 
     if (OriginalRequest.responseText!= "" )
      {
          var temp;
       var temp1
       var temp2
       var temp3
       temp=OriginalRequest.responseText;
       temp3=temp.substring(temp.indexOf(",")+1,temp.length)
       temp=temp.substring(0,temp.indexOf(","))
             var classtemp = new Array;
       classtemp=temp.split("-"); 
       var j=1
       getElementById(temp3).options[0] = new Option("请选择","")
       for (i=0;i<classtemp.length-1;i++)
       {
        temp1="";
        temp2="";
              temp1= classtemp[i].substring(0,classtemp[i].indexOf("$"));
           temp2= classtemp[i].substring(classtemp[i].indexOf("$")+1,classtemp[i].length);
        
        getElementById(temp3).options[j] = new Option(temp1,temp2);
            j=j+1
       }
 
      }    
     }
</>
</head>
<body>
<div id=content>
<form name="form1" action="" method="post">
<h2>产品添加</h2>
<div id="hao"></div>
<ul>
<li><div class=addleft>产品分类:</div><div class=addright> 一级分类:<select onchange="Start_***('class/pclass_make.asp','formname=form1&bigclass=two&idname=pclass2&class1id='+this.options[this.selectedIndex].);"  name="pclass1" id="pclass1" ><OPTION ="" ></OPTION></select> 二级分类:<select name="pclass2" id="pclass2"  onchange="Start_***('class/pclass_make.asp','formname=form1&bigclass=three&idname=pclass3&class2id='+this.options[this.selectedIndex].);" ><OPTION ="" ></OPTION></select> 三级分类:<select name="pclass3" id="pclass3" ><OPTION ="" ></OPTION></select></div></li>
<li><div class=addleft>产品名称:</div><div class=addright> <input name="pname" type="text" ="" /></div></li>
<li><div class=addleft>产品规格:</div><div class=addright> <input name="psize" type="text" ="" /></div></li>
<li><div class=addleft>产品说明:</div><div class=addright> <input name="pcontent" type="text" ="" /></div></li>
<li><div class=addleft>产品备注:</div><div class=addright> <input name="premarks" type="text" ="" /></div></li>
<li><div class=addleft>产品价格:</div><div class=addright> <input name="price" type="text" ="" /></div></li>
<li><div class=addleft>小图片:</div><div class=addright> <input name="pic_s" type="text" ="" /></div></li>
<li><div class=addleft>大图片:</div><div class=addright> <input name="pic_b" type="text" ="" /></div></li>
</ul>
</form>
</div>
 < language=JAVA>resetclass1();resetclass2();resetclass3();Start_***('class/pclass_make.asp','formname=form1&bigclass=one&idname=pclass1');</>
</body>
</html>

2.后台页面处理源码:


<%@LANGUAGE="VB"  CODEPAGE="65001"%>
<%
if Session("adminuser")="" then
 Response.Redirect "../login.asp"
end if%>
<!-- #i nclude file="../../inc/conn.asp" -->
<!-- #i nclude file="../../inc/.asp" -->
<%
dim class1id
dim class2id
dim class3id
dim formname
dim bigclass
dim idname
dim content
content=""
formname=haorep(request.querystring("formname"))
class1id=haorep(request.querystring("class1id"))
class2id=haorep(request.querystring("class2id"))
class3id=haorep(request.querystring("class3id"))
bigclass=haorep(request.querystring("bigclass"))
idname=haorep(request.querystring("idname"))
select case bigclass
case "one"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class1id,class1name from pclass1 " ,conn,1,1
case "two"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class2id,class2name from pclass2  where class1id=" & class1id & " " ,conn,1,1
case "three"
set rs=server.CreateObject("adodb.recordset")
rs.open "select class3id,class3name from pclass3 where class2id=" & class2id & " "  ,conn,1,1
end select
       '开始写入数据
  i=0
  do while not rs.eof
  i=i+1
  content=content  &  rs(1) & "$" &  rs(0) & "-"   '传输数据,以"-"分隔
  rs.movenext
  loop
  content=content & "," & idname '加入idname标志,以","分隔
  rs.close
  set rs=nothing
  conn.close
  set conn=nothing  
  '写入完毕,输出内容
  response.write content
  response.end
%>
小号 | 阅读全文 | 回复(0) | 引用通告 | 编辑
  • 标签:Ajax asp protype.js 
  • 发表评论:

      大名:
      密码: (游客无须输入密码)
      主页:
      标题:
    公告
    时间记忆
    最新日志
    最新评论
    最新回复
    我的好友
    我的相册
    站点信息
    生活因感动而精彩,理想在创造中放飞
    Powered by Oblog.