jQuery基础

validation 插件

Validation 是一个优秀的表单验证插件。

1.快速上手
首先引入Validation库。

<script src="./js/jquery.validate.js" type="text/javascript"></script><p>     <label for="cusername">姓名</label>     <em>*</em><input class="required" minlength="2" id="cusername" name="username" size="25" />   </p>   <p>     <label for="cemail">电子邮件</label>     <em>*</em><input class="required email" id="cemail" name="email" size="25"  />   </p>   <p>     <label for="curl">网址</label>     <em>  </em><input class="url" id="curl" name="url" size="25"  value="" />   </p>   $('#commentForm').validate();

2.不同的写法

第一种写法

这种写法需要引入一个支持固定格式解析的jQuery插件，Validation将其很好的融合进验证规则编码中。

<p>     <label for="cusername">姓名</label>     <em>*</em><input class="{validate:{required:true,minlength:2}}" minlength="2" id="cusername" name="username" size="25" />   </p>   <p>     <label for="cemail">电子邮件</label>     <em>*</em><input class="{validate:{required:true,email:true}}" id="cemail" name="email" size="25"  />   </p>   <p>     <label for="curl">网址</label>     <em>  </em><input class="{validate:{url:true}}" id="curl" name="url" size="25"  value="" />   </p>   $('#commentForm').validate({meta:"validate"});

第二种方法
不将验证规则写在 class 属性中，而写在javascript代码中。

$('#commentForm').validate({        rules:{            username:{                required:true,                minlength:2            },            email:{                required:true,                email:true            },            url:"url",            comment:"required"        }     });

3.默认校验规则

验证规则 解释 required:true 必输字段 remote:”check.php” 使用ajax方法调用check.php验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期 dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性 number:true 必须输入合法的数字(负数，小数) digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:”#field” 输入值必须和#field相同 accept: 输入拥有合法后缀名的字符串（上传文件的后缀） maxlength:5 输入长度最多是5的字符串(汉字算一个字符) minlength:10 输入长度最小是10的字符串(汉字算一个字符) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符) range:[5,10] 输入值必须介于 5 和 10 之间 max:5 输入值不能大于5 min:10 输入值不能小于10

Ajax简介

在过去，我们在网页中刷新页面内容，需要重新从服务器获取新的页面。

Ajax的出现，揭开了无刷新更新页面的新时代。

Ajax优势

• 优秀的用户体验：Ajax最大的有点是能在不刷新整个页面的前提下更新数据，这使得Web应用能迅速的回应用户的操作。
• 提高Web程序的性能：在传统模式中，数据提交是通过表单来实现的，而数据的获取则需要全页面刷新来获取整页内容。Ajax可以不刷新整个页面，按需提交数据给服务器，并接收服务器返回，然后通过dom操作，按需刷新页面的一部分。
• 减轻服务器和带宽的负担：Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。把传统方式下的一些服务器负担的工作转移到了客户端。

jquery中的ajax

$.ajax()方法
$ajax()方法是jQuery最底层的Ajax实现。

结构：$.ajax(options)

options参数是一个对象：

options参数名称 说明 url 发送请求的地址 type 请求方式 timeout 请求超时时间（毫秒） data 发送到服务器的数据 datatype 预期服务器返回的数据类型 complete 完成后调用的回调函数 success 请求成功后调用的回调函数

跨域问题
什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）

• 跨域问题一般可以在后台解决。
• 也可以使用jsonp方式解决跨域问题，但是也需要后台接口支持JSONP格式。