用XML+XSLT+CSS+JQuery组建ASP.NET网站

前言

早在Web标准化风潮到来之前 ,我就考虑过XML+XSLT建站了,我以为这是一种非常优雅、 高效、低耦的方案,必将大行其道。

然而时至今日,使用这种方案建站的人依然寥寥无几,大家还都在抱着Web标准化不撒手,其实Web标准化只是 将表现(Css)分离了出来,而数据和结构仍然混杂在一起 ,它绝对不是我们最终的归宿,它只是一个过渡品。

XHtml标准的建立初衷,其实也就是为了向 XML过渡的,XML+XSLT+CSS才真正做到数据、结构、表现的完美分离,才是我们的终极目标。

诚然,XML+XSLT确实有其技术难度, 我想这是它难于普及的最大障碍所在,但我觉得随着时间的推移、观念的更新、工具的发展, 这仍旧是我们必会到达的一站。

方案简介

XML+XSLT+CSS的方案将数据、结构、表现进行 了分离,而依托JQuery我们又可以轻松地将交互也从中分离 出来,这样在客户端就达到了近乎完美的解耦。

[[2865]]

而在服务器端,我们只负责输入和输出:

输入部分使用WebService,主要用于 接收客户端提交的数据,以更新服务器数据。

输出部分即为XML,可以有两种实现方 案:

1. 动 态型。使用一个扩展名为.ashx处理程序负责输出 XML,只要通过此处理程序从数据库取出客户端需要的数据 ,并转换为XML文档输出即可。动态型的好处在于支持 Url参数查询及其他复杂查询处理。

2.静态型。放弃数据库,将所有用于呈现的数据都直接写为XML文件。静态型的好处当然就是服务器负荷极低了,在不提交数据的情况 下,服务器会比纯静态HTML网站还要轻松很多。

[[2866]]

优势

对比以往的各种开发方案,我总结出此方案具有以下优势:

1.更便于团队协作。充分解耦带来的就是细化分工及并行开发,以往的各 种开发方案中,总有许多地方界限模糊,致使前台与后台、程序员与设计师频繁磋商,延误开 发效率。

比如仅仅是一个XHTML文档, 设计师要在上面定义文档结构,以及ID、Class,前台程序员要在上面写客户端事件,后台程序员得把从数据库中取 得的数据插入到页面中的某处,三方的工作都受其牵制,这时XHTML就像是一个接口,三方共用着这一个接口。

而我们的这个方案中的情况是怎样的呢?后台程序员只管怎么跟 数据库打交道、怎么处理业务逻辑,客户端需要数据时,只要扔出个XML文档就可以了; 作为设计师,只要知道XML文档结构,就可以通过XSLT灵活地安排布局 ,即使需要大幅修改布局,也不需要劳烦后台程序员插手,简单的XSLT语法对于设计师不是什么大问题;前台程序员需要知道用户界面中有哪些交互 控件,为他们安排事件逻辑,并提交到后台的WebService中 去就可以了;这时XML、XSLT、WebService就像是三个接口,一方最多接 触其中的两个。

接口多了好,还是少了好?可以看看索爱手机的例子,索爱手机 大多是耳机、充电、数据传输都共用着一个接口,充电的时候不能插耳机听歌、插耳机听歌的 时候不能传数据、传数据的时候不能充电,而其他品牌的手机则大多是分别使用多个接口的, 哪个更方便不言自明吧。(当然,从安全角度来看的话,索爱的单接口却是更优秀的,此前曾 有新闻报道过某男用手机边听歌边充电被雷击致死的事故,那人在死前还大喊:“啊!我死啦 !”-_-#,围观地址)

2.更节省服务器资源。带宽资源方面:此方案中,用户每次切换页面,所 需下载的都只是一个XML文档而已,其他XSLT、CSS、JS都只需下载一次,提交时也不需要表单回发,更不需要ViewState。处理器资源方面:客户端呈现完代码全由XSLT在客户端动态合成,服务器端的工作仅仅是处理业务逻辑和数据库交互,极其 轻松。此方案的资源消耗水平略高于Ajax方案,低于 MVC方案,相对于WebForm、MVP及传统脚本式的方案来说,节省的 资源非常可观。

3.更易于搜索引擎收录。首先就是此方案可以被搜索引擎收录,而 Ajax方案的弊端就在这里;其次,搜索引擎喜欢冗余少的网 站,这会一定程度上影响网站排名,而XML数据最为符合这 一要求;再者,网址较为友好,这是相对MVC而言的,具体 原因可参看我此前发表的一篇文章 。

4.更容易在其他客户端中使用。这一点Ajax方案也同样优秀,MVP方案实现起来有些困 难,其他的方案都难以实现。

弊端

没有完美的事物,此方案弊端如下:

1. 更 高的技术要求。显然相比以往的方案,此方案需要开发者掌握更多知识,并组合应用。

2.更高的客户端负荷。XSLT加重了客 户端的处理压力,虽然我们大都觉得客户端的运算资源负荷是一个可以忽视的问题,从而将尽 可能多的运算放到客户端,但并不是所有客户都使用中高端的机器,尤其是对一些上网本用户 而言,JS已经让他们头疼了。

3.更差的兼容性。HTML、 JS、CSS在各个浏览器上 本就有些兼容性问题,现在XSLT又掺合进来,开发者面临的 问题更为严峻。并且对于移动客户端、盲人阅读器及其他非常规客户端而言,XSLT是否会被解析都是个疑问。

#p#

范例

现在演示一个网站范例。

首先建立一个数据库,这里使用的Accesee 2000-2003数据库,命名为Database.mdb,在其中建 立User表:

输入一些数据,用于测试显示:

将其导入网站项目中的App_Data目录 。

添加一个ashx文件,名为 Default.ashx:

输入以下代码:

<%@ WebHandler Language="C#" Class="Default" %>

using System;

using System.Web;

using System.Data.OleDb;

using System.Data;

using System.Xml;

public class Default : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

OleDbConnection c = new OleDbConnection (string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb")));

var ds = new DataSet ();

c.Open();

//获取Url 中的max参数

var max = 0;

Int32.TryParse(HttpContext.Current.Request.QueryString["max"],out max);

//读取数据

new OleDbDataAdapter(string.Format("select{0} * from [User]", max > 0 ? " top " + max : string.Empty), c).Fill (ds);

c.Close();

//建立XML 文档

var xml = new XmlDocument ();

xml.LoadXml(ds.GetXml ());

//添加文档声明

xml.InsertBefore(xml.CreateXmlDeclaration("1.0", "UTF-8", null), xml.DocumentElement);

//添加xslt 声明

var xsl = xml.CreateProcessingInstruction("xml- stylesheet", @"type=""text/xsl"" href=""Default.xslt""");

xml.InsertBefore(xsl, xml.DocumentElement);

//输出

context.Response.ContentType = "application/xml";

context.Response.Write(xml.InnerXml);

}

public bool IsReusable

{

get

{

return false;

}

}

}

再添加一个XSLT文件,命名为 Default.xslt,输入以下代码:

xml version="1.0" encoding="utf-8"?>

xmlns:msxsl="urn:schemas-microsoft- com:xslt" exclude-result-prefixes="msxsl"

>

XML网站测试 title></p> <p><link href="Style.css" rel="stylesheet" type="text/css"/></p> <p><script src="jquery-1.3.2.js" type="text/javascript"/></p> <p><script src="Post.js" type="text/javascript"/></p> <p> hread></p> <p><body></p> <p><h1>XML网站测试 h1></p> <p><ul></p> <p><xsl:for-each select="//Table"></p> <p><li></p> <p><a href="#"></p> <p><xsl:value-of select="ID"/></p> <p> a></p> <p><xsl:value-of select="UserName"/></p> <p> li></p> <p> xsl:for-each></p> <p> ul></p> <p><input type="text" name="Name" id="Name" /></p> <p><input type="submit" name="PostName" id="PostName" value="提交" /></p> <p> body></p> <p> html></p> <p> xsl:template></p> <p></p> <p> xsl:stylesheet></p></pre></p><p>注意,在XSLT中可包含用于提交数据的交互控件, 但不需要为其定义事件处理,交互处理都由JS完成。</p><p>添加一个CSS文件,命名为 Style.css,输入以下代码:</p></p><pre><p>body</p> <p>{</p> <p>background-color: Silver;</p> <p>}</p> <p>h1</p> <p>{</p> <p>color: Gray;</p> <p>}</p> <p>a</p> <p>{</p> <p>color:White;</p> <p>margin- right:6px;</p> <p>}</p></pre></p><p>编译并运行,即可看到输出的数据:</p><p>查看其源代码:</p><p>用户访问不同页面时,只有这些 XML代码会被多次 下载,其他客户端的文件都只需下载一次,大大节省了服务器网络资源。</p><p>由于此前在ashx中编写了支持 Url参数查询的代码,我们可以通过设置max参数来决定显示的最大数据条目数:</p><p>输出部分至此就完成了,接下来是输入部分:</p><p>导入JQuery代码jquery-1.3.2.js到项目中。</p><p>添加一个JS文件,命名为 Post.js,输入以下代码:</p></p><pre><p>///</p> <p>$(function() {</p> <p>$("#PostName").click(function() {</p> <p>$.post("./webservice.asmx/AddName", { "Name": $("#Name").attr("value") }, function() { location.reload(); })</p> <p>});</p> <p>}</p> <p>);</p></pre></p><p>可以看到,通过JQuery在JS代码文件中为按钮注册处理函 数非常简单,这样就将交互部分完全分离开来。</p><p>添加一个WebService,命名为 WebService.asmx,在其后台代码文件WebService.cs中输入如下代码:</p></p><pre><p>using System;</p> <p>using System.Collections.Generic;</p> <p>using System.Linq;</p> <p>using System.Web;</p> <p>using System.Web.Services;</p> <p>using System.Data.OleDb;</p> <p></p> <p>///</p> <p></p> <p>///WebService 的摘要说明</p> <p>///</p> <p></p> <p>[WebService(Namespace = "http://tempuri.org/")]</p> <p>[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]</p> <p>//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。</p> <p>// [System.Web.Script.Services.ScriptService]</p> <p>public class WebService : System.Web.Services.WebService {</p> <p></p> <p>public WebService () {</p> <p></p> <p>//如果使用设计的组件,请取消注释以下行</p> <p>//InitializeComponent();</p> <p>}</p> <p></p> <p>[WebMethod(Description="添加一个新的用户名")]</p> <p>public void AddName(string Name) {</p> <p>OleDbConnection c = new OleDbConnection (string.Format(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=""{0}"";Persist Security Info=True", HttpContext.Current.Server.MapPath(@"~\App_Data\Database.mdb")));</p> <p>c.Open();</p> <p>new OleDbCommand(string.Format("INSERT INTO [User] VALUES ('{0}','{1}')",Guid.NewGuid (),Name),c).ExecuteNonQuery ();</p> <p>c.Close();</p> <p>}</p> <p></p> <p>}</p> </pre></p><p>编译并执行,测试提交数据:</p><p>提交成功后会刷新页面(JS里的回调 函数所为),刷新后的输出数据:</p><p>此范例完成,解决方案资源管理器中显示的目录结构如下:</p><p><strong>可预见的问题</strong></p><p><strong>一定要用</strong><strong>JQuery</strong><strong>吗?</strong><strong></strong></p><p>不,只是方便而已,其他框架或自写JS也都可以实现。</p><p><strong>我的网站需要侧边栏显示一些热门文章排行之类的东西,该怎么 实现呢?</strong><strong></strong></p><p>可以通过Ajax的方式,配合 WebService异步获取数据,但这样的话搜索引擎没法收录这 些数据。</p><p>也可以将这些数据直接写在XML里,但 这样的话又会造成冗余。</p><p>比较妥当的方法是将XSLT也改为由 ashx处理程序动态生成,在里面写入这些数据,但这样会增 加服务器负荷,注意设好缓存应该影响不大,另外的副作用就是使后台开发人员和设计师又亲 密接触了。</p><p><strong>怎么使用</strong><strong>Session</strong><strong>?怎么使 用</strong><strong>Membership</strong><strong>?</strong><strong></strong></p><p>我们的XML文件是使用ashx处理的,实质上它和aspx没多大区 别,可以通过HttpContext.Current.Session访问到 Session,要干什么都可以在里面干了。如果要由客户端改 变Session的值,只要通过WebService就可以了。</p><p>使用Membership也是同样道理,只不 过少了那些登录控件什么的,你必须手动编写代码来控制了。</p><p><strong>结语</strong></p><p>XML是XHtml的终极目标,虽然现在将XML用于网站开发 或许还不够成熟,但是应该距成熟不远了,Ajax的诞生进一 步奠定了前往XML的路,这路必定会越来越好走的。</p><p>我承认,我喜欢研究一些非主流的东西=。=,此前还研究过用XAML做网页,HOHO,也许RIA才是未来的王者也说不定。</p><p>【编辑推荐】</p><ol><li>亮剑.NET:图解ASP.NET网站开发实战</li><li>作为ASP.NET开发人员必须养成的编程习惯</li><li>视频教程:ASP.NET Web开发详解</li></ol> <p> 本文标题:<a href="http://www.mswzjz.cn/qtweb/news49/450599.html">用XML+XSLT+CSS+JQuery组建ASP.NET网站</a> <br> 网址分享:<a href="http://www.mswzjz.cn/qtweb/news49/450599.html">http://www.mswzjz.cn/qtweb/news49/450599.html</a> </p> <p> 攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: <a href="http://www.mswzjz.cn/" target="_blank">贝锐智能</a> </p> </div> <div class="newsmorelb"> <p>贝锐智能技术为您推荐以下文章</p> <ul> <li> <a href="/qtweb/news48/450598.html">【探索MiixLinux的魅力】(miixLinux)</a> </li><li> <a href="/qtweb/news47/450597.html">如何成为一名数据库系统工程师?(如何考数据库系统工程师)</a> </li><li> <a href="/qtweb/news46/450596.html">同一网站所有人有多个网站如何备案?(备案号如何绑定多个网站使用)</a> </li><li> <a href="/qtweb/news45/450595.html">假如你想成为全栈工程师…</a> </li><li> <a href="/qtweb/news44/450594.html">如何使用VPS服务器粘贴?(vps服务器粘贴)</a> </li><li> <a href="/qtweb/news43/450593.html">茶叶网站建设网页设计制作_入门指引</a> </li><li> <a href="/qtweb/news42/450592.html">北京泰祥智能交通</a> </li><li> <a href="/qtweb/news41/450591.html">如何为数据库表添加新字段(数据库表增加一个字段)</a> </li><li> <a href="/qtweb/news40/450590.html">如何将数据库文件夹导入手机网站 (手机网站怎么导入数据库文件夹)</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/daohang/">网站导航知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news13/99413.html">使用Disks工具在Ubuntu图形界面中挂载分区</a> </li><li> <a class="text_overflow" href="/qtweb/news45/52145.html">如何快速申请注册域名账号</a> </li><li> <a class="text_overflow" href="/qtweb/news24/371924.html">红色框架面试时关注的重点(redis框架面试题)</a> </li><li> <a class="text_overflow" href="/qtweb/news30/495980.html">勇士怎么样?(勇士怎么样值得买吗)</a> </li><li> <a class="text_overflow" href="/qtweb/news30/422630.html">解决Linux文件无法执行的问题(linux文件不能执行)</a> </li><li> <a class="text_overflow" href="/qtweb/news32/84482.html">谁的速度快!谁背锅(技术解析)</a> </li><li> <a class="text_overflow" href="/qtweb/news14/301564.html">「数据库防火墙」开发入门指南(数据库防火墙入门开发)</a> </li><li> <a class="text_overflow" href="/qtweb/news20/253420.html">全站托管怎么开通?免费虚拟服务器注册</a> </li><li> <a class="text_overflow" href="/qtweb/news48/409298.html">CentOS常用命令都有哪些</a> </li><li> <a class="text_overflow" href="/qtweb/news46/69646.html">加了域的电脑无法修改密码?(域服务器修改用户密码)</a> </li><li> <a class="text_overflow" href="/qtweb/news34/420534.html">页游服务器与普通WEB服务器的的区别有哪些</a> </li><li> <a class="text_overflow" href="/qtweb/news27/490077.html">cad制图坐标轴怎么弄?(cad设置轴,CAD坐标轴怎么改)</a> </li><li> <a class="text_overflow" href="/qtweb/news20/441820.html">企业如何选择租用服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news12/168262.html">mysql中selecttop的使用方法是什么</a> </li><li> <a class="text_overflow" href="/qtweb/news16/346216.html">大型项目如何利用Redis获得极致性能(大型项目中redis使用)</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">行业网站建设</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/gaokongche/" target="_blank">高空作业车租赁</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ldjbc/" target="_blank">履带搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/cantingsj/" target="_blank">餐厅设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/lajitong/" target="_blank">垃圾桶</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shilongwang/" target="_blank">石笼网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bolixiufu/" target="_blank">汽车玻璃修复</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/baiwuyu/" target="_blank">白乌鱼</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shidiao/" target="_blank">石雕</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/snjbc/" target="_blank">水泥搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zbljbc/" target="_blank">自拌料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bxgds/" target="_blank">不锈钢雕塑</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fadianjihs/" target="_blank">发电机回收</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggtg/" target="_blank">广告推广</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiangsu/" target="_blank">橡塑保温</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/muzhiliangting/" target="_blank">木制凉亭</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hntjbc/" target="_blank">混凝土搅拌罐车</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.024fuxl.com/" target="_blank">成都学生服定制</a>    <a href="https://www.cdxwcx.com/city/chongzhou/" target="_blank">崇州网站建设</a>    <a href="http://www.whyarui.cn/" target="_blank">景区导示设计制作</a>    <a href="https://www.cdxwcx.com/jifang/zongshu.html" target="_blank">棕树数据中心</a>    <a href="http://seo.cdkjz.cn/mobile/" target="_blank">成都网站推广公司</a>    <a href="http://www.cdfuwuqi.com/jigui/" target="_blank">成都机柜租用</a>    <a href="http://www.bjjierui.cn/" target="_blank">成都网站建设</a>    <a href="https://www.cdxwcx.com/wangzhan/mbyidong.html" target="_blank">wap手机网站</a>    <a href="http://www.scy12.cn/" target="_blank">德阳发电机</a>    <a href="https://www.cdxwcx.com/jifang/guanghua.html" target="_blank">光华村机房</a>    <a href="http://www.bzwzjz.com/serve/" target="_blank">高端网站设计</a>    <a href="http://www.cqcxhl.com/" target="_blank">重庆网站制作</a>    <a href="http://www.wjzwz.com/" target="_blank">温江网站建设</a>    <a href="http://www.xnruijie.cn/" target="_blank">赛亚人环保</a>    <a href="http://www.cdweb.net/" target="_blank">成都网站设计</a>    <a href="http://www.jinhuajc.com/" target="_blank">成都保温材料</a>    <a href="https://www.cdcxhl.cn/ " target="_blank">免备案空间腾讯云</a>    <a href="http://www.bzwzjz.com/" target="_blank">广东网站设计制作公司</a>    <a href="http://m.xwcx.net/" target="_blank">响应式网站</a>    <a href="http://www.bgwzsj.com/" target="_blank">班戈纳美网站</a>     </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 品质网站制作 <i class="icon iconfont"></i> 自适应网站 <i class="icon iconfont"></i> 开发成本低 <i class="icon iconfont"></i> 响应速度快 <i class="icon iconfont"></i> 多人服务好 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始600网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 600网站制作</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>:532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>:532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ:1683211881</a> <div class="dz">创新互联建站专注: <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站设计</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站制作</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站建设</a> <address>地址:成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel:028-86922220(7x24h)</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>