Ajax改造：使用Ajax和jQuery改进现有站点（4）
来源：PHP100 发布时间：2010-04-02 12:50:00
代码
Customize Me Now 的功能演示代码只提供了客户端部分：HTML CSS、JavaScript 代码和图像文件。在实际中，您显然还需要一个大型的服务器端组件：Microsoft® ASP.NET、Java 技术、Ruby on Rails、Django 或 PHP。但是 jQuery 的美妙之处在于，它纯粹关于客户端。您可以使用 Ajax 简化您的用户体验，无需服务器端组件。我没有提供任何服务器端代码，因为这些细节对于这个项目无关紧要。您只需知道当您打开一个 HTML 文件时，就会有一个 PHP 模板、一个 JavaServer Pages™ (JSP) 文件或任何其他将 HTML 发送到服务器的文件。
下载了 1.0 版应用程序的源代码之后，请看一下其中一个页面的标记。它应该与清单 1 类似。
清单 1. results.html 1.0 的 HTML 代码
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Customize Me Now: Search Results</title>
<link rel="stylesheet" type="text/css" href="../css/customizemenow.css"/>
</head>
<body id="CMN">
<!--[header goes here]-->
<div id="main">
<form method="GET" action="comparison.html">
<h1>Search Results</h1>
<div class="buttons">
<input class="button" type="submit" name="submitTop" id="submitTop"
value="Compare Selected Products" />
or <a href="index.html">search again</a>
</div>
<table class="searchResults">
<thead>
<tr>
<th>Product</th>
<th>Description</th>
<th>Options</th>
<th>Compare</th>
<th>Actions</th>
</tr>
</thead>
<tr>
<td class="name">
<a target="productPopup"
href="productPopup.html?product=A">Pizza</a>
</td>
<td class="desc">
A delicious Italian treat.<br />
[<a href="detail.html?product=A">full product details</a>]
</td>
<td class="options">
<ul>
<li>
<a target="optionsPopup"
href="optionsPopup.html?product=A">crust</a>
</li>
<li>
<a target="optionsPopup"
href="optionsPopup.html?product=A">cheese</a>
</li>
<li>
<a target="optionsPopup"
href="optionsPopup.html?product=A">toppings</a>
</li>
</ul>
</td>
<td class="action">
<input type="checkbox" target="productPopup" name="compareA"
id="compareA" value="true" checked="checked"/>
</td>
<td class="action">
<a class="button" href="customize.html?product=A">customize
product</a>
<a class="button" href="cart.html?product=A">add to cart with
default options</a>
</td>
</tr>
<!--[additional table rows go here]-->
</table>
<div>
<div class="buttons">
<input class="button" type="submit" name="submitBottom" id="submitBottom"
value="Compare Selected Products" />
or <a href="index.html">search again</a>
</div>
</form>
</div>
<!--[footer goes here]-->
</body>
</html>
0
投稿猜你喜欢
本文实例为大家分享了bootstrap实现收缩导航条的具体代码，供大家参考，具体内容如下效果图 贴上我的代码<!DocType htm- 1.writelines()直接写入l=["A","B","C","D
- 一.图像阈值化图像阈值化（Binarization）旨在剔除掉图像中一些低于或高于一定值的像素，从而提取图像中的物体，将图像的背景和噪声区分
- 这篇文章主要介绍了python with (as)语句实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,
- 本文实例为大家分享了python实现单线程多任务非阻塞TCP服务端的具体代码，供大家参考，具体内容如下# coding:utf-8from
- 前言之前看到一个有意思的开源项目，主要是可以将一张照片变成卡通漫画的风格。下面给大家放几张官方给出的部分效果图。看到这个效果图，还是非常经验
- html<!--图片轮播 Start--><div class="pics-ul">
- 准备开始学习Python，但是刚准备环境搭建时就遇到了下面的错误：仔细的看了看，说是缺少DLL。对于这个问题的解决办法：方法一：1. 在安装
- 1. wheel介绍：.whl文件(WHL file)也称为轮子(wheel)，这是用于python分发(distribution)的标准内
- 重装电脑，在windows和虚拟机里面的Ubuntu里都安装了Pycharm专业版，安装的时候我都选择了vim插件，装好之后打开发现ctrl
- 本文介绍了 setuptools 框架的内容，它是 PEAK 的一个副项目，它提供了比 distutils 更加简单的包管理和发行功能。开始
- 首先来说，让一个游戏赋有可玩性必须要动静结合。（哈哈，大家以为我要讲作文了。。。但其实我今天要讲的是Javascript）静态的东西谁不会做
- 前言在日常工作中，可能需要结合网上现在的一些API或者公司提供的数据接口来得到相应的数据或者实现对应的功能。因此API的调用和数据接口的访问
- 1. 前沿移动均线是股票最进本的指标，本文采用numpy.convolve计算股票的移动均线2. numpy.convolvenumpy.c
- 前言学会向程序中添加必要的注释，也是很重要的。注释不仅可以用来解释程序某些部分的作用和功能（用自然语言描述代码的功能），在必要时，还可以将代
- 背景我打开手机，发现有人在QQ空间里叫嚣。看他得意的样子，显然是在家里呆久了，已经忘了天有多高。预处理设计一个迷宫自动寻路算法并不难，但是对
- 随着软件项目进入“维护模式”，对可读性和编码标准的要求很容易落空（甚至从一开始就没有建立过那些标准）。然而，在代码库中保持一致的代码风格和测
- 在做项目的时候，遇到这样的数据："trends": [ { &nb
- Urllib3是一个功能强大，条理清晰，用于HTTP客户端的Python库。许多Python的原生系统已经开始使用urllib3。Urlli
- 1.字符串的字符转换1.1.字符转换的概念在前面说的的字符串替换，是将字符串中的一个子串替换成了新的子串，如果我们想对字符串中的某些字符进行
